JavaScript を使用して、自動補完_JavaScript スキルと同様の IE のフォームの自動補完を模倣します。

最近 JavaScript フレームワークを作成していましたが、インターネット上でオートコンプリート機能を備えたフォームをたくさん見かけたので、思いつきで、フレームワークに色を加えるために JavaScript でフォームを作成してみました。 >手順
:
1. 1 つ目はバインドするフォーム オブジェクト、2 つ目は取得する配列です。2. div をレイヤーとして動的に作成します。自動的に完了し、属性とイベントを設定したいとします（ここでは div の可視属性と表示属性を設定しませんでしたが、その左側を「-1000px」に設定しました。これにより、ブラウザの外に移動され、非表示の効果が得られます。 3. 入力された配列を取得し、入力内容に一致する項目を検索し、それらを新しい配列に保存します。 書き方が悪くて申し訳ありません。取得したデータが格納されている新しい配列を処理し、重複する内容を含む項目を削除して、div の左、上、幅を設定します。


以下の完全なコードを見てください
:


コードをコピーします

コードは次のとおりです: if(!sx) var sx={}; sx.activex.autocomplete={

bind:function(a, s){

var d=document.createElement("div");
d.style.position="absolute";
d.flag="autocomplete";
document.body.appendChild (d);
d.style.left="-1000px";
d.style.height="100px";
d.style.overflow="auto"; {
if(document.elementFromPoint(window.event.clientX,window.event.clientY).flag=="autocomplete" || document.elementFromPoint(window.event.clientX,window.event.clientY ).parentNode. flag=="autocomplete")
return;
d.style.left="-1000px";
a.onkeyup =function() {
if(a.value=="") {
d.innerHTML="";
}
d.innerHTML=""; [];
for(var i in s){
if(eval("/^" a.value "$/i").test(s[i])){
t.push (s[i]);
}
}
for(var i in s){
if(eval("/^" a.value ". $/i" ).test( s[i])){
t.push(s[i]);
}
}
for(var i in s){
if(eval( "/^. " a.value "$/i").test(s[i])){
t.push(s[i]);
}
}
for( var i in s ){
if(eval("/^. " a.value ". $/i").test(s[i])){
t.push(s[i])
}
}
for(var e=0;efor(var e1=e 1;e1if(t[e]==t[e1]){
for(var e2=e1 1;e2if(t[e2] ){
t[e2-1]=t[e2];
}
}
t.length=t.length-1;
}
}
/ /alert(t);
for(var i in t){
var p=document.createElement("div");
p.onmouseenter =function(){
this.style.backgroundColor="blue";
}
p.onmouseleave=function(){
this.style.backgroundColor="white";
p.onclick=function(){
a.value=this.innerText;
d.style.left="-1000px";
d.appendChild (p)
}
d.style.top=a.offsetTop a.offsetHeight "px";
d.style.left=a.offsetLeft "px";
d.style.width =a.offsetWidth "px";
}
}
}。


という HTML コード:




コードをコピーします。 🎜>

コードは次のとおりです:

<script> "a"),["asd","a","悲しい","えー","ewrew","aadasd","wqqwrqw","asasf","qweqw"]); .autocomplete.bind(document.getElementById("a1"),["asd","a","sad","er","ewrew","aadasd","wqqwrqw","asasf","qweqw" ]); <span></script> コードは最適化されていません。みんなを笑わせるアイデア。