AJAXなどの技術を使って既存のリストを絞り込む

Question

うまくいけば、これを説明することができたらうれしいことですが、私がタイトルで使ったような用語を検索することで見つけられた最大のものは、多くのオートコンプリートの例を与えましたが、探しています。ボタンのリスト（現在は入力としてコード化されています）があり、ユーザーが検索フィールドに入力するとボタンを絞り込む検索フィールドを追加します。

たとえば、人気のあるウェブサイトのボタンが30個あります。もし誰かがGoogleを引っ張りたいのであれば、「G」の文字を含むものから「O」のものまでを含むものから始めるだろう。他のものは全てページから消えるだろう。

私はこれを手動で行う方法を考えることができますが、私のコードはDRYではないと思います。おそらく "on"と "off" IDを設定し、CSSを使用してnoneまたは何かを表示します。

私はこれを行うための最良の方法はAJAX経由であると思っていますが、より適切なjavascriptのブードーがあるかもしれません。

Answer 1

簡単です。最初は、すべてのデータがすでにユーザーにある場合、回答サーバーをフィルタリングするための不要なものです。また、htmlを書いてjsでフィルタリングするべきではありません。jsで記述し、html出力を生成する必要があります。

var links=[ 
    { 
     name:"google", 
     url:"http://google.com" 
    }, 
    {nextone} 
    ]; 

今のhtml内のリンクを生成します：

window.onload=function(){ 
    var container=document.body;//change this to your needs 
    for(i=0;i<links.length;i++){ 
    var link=links[i]; 
    link.html=document.createElement("a"); 
    link.html.innerHTML=link.name; 
    link.html.src=link.url; 
    container.appendChild(link.html); 
} 
}; 

STHがinputedされている場合は、比類のないものを隠す：

function filter(string){ 
//loop trough links 
for(i=0;i<links.length;i++){ 
    var link=links[i]; 
    //if string doesnt match name 
    if(!link.name.split(string)[1]){ 
     link.html.style.display="none"; 
    }else{ 
     link.html.style.display="block"; 
    } 
    } 
    } 

は次のように使用します。

を構成して開始します

filter("goo"); 

あなたcoul入力にそれをバインドdは：

yourinput.addEventListener("onchange",function(){filter(this.value)},false);