html - jQuery ライブ フィルター/検索

Question

フロントエンド (フォームの送信) のユーザーがアイコンを選択できるアイコン ライブラリを構築しています。選考までは何とかやり遂げることができました。現在、最終製品には 400 以上のアイコンがあり、検索 (ajax だと思います) またはオートコンプリート入力を追加して、ユーザーが数文字を入力してそれらのアイコンを除外できるようにしたいと考えていました。

彼らは、接頭辞「icon-」を持つクラスでいくつかを除外して検索するため、検索語はその接頭辞の後にあるものになります。(例: icon-TWIITER、icon-FACEBOOK など)。

ここで jsFiddle を開始しました: http://jsfiddle.net/yQMvh/28/

例は次のようになります。

http://anthonybush.com/projects/jquery_fast_live_filter/demo/

http://cheaun.github.io/jquery.livefilter/

私はjQueryプラグインから離れて、それに頼る前にこれを理解しようとしています。ウェブサイトのバックエンドとしてワードプレスを使用しています。

ユーザーが入力するとすぐに、入力値に関連するアイコンが既に分類されています。

私の HTML マークアップ:

 <div class="iconDisplay">Display's selected icon</div>
 <span id="selectedIcon" class="selected-icon" style="display:none"></span>

 <button id="selectIconButton">Select Icon</button>

 <div id="iconSelector" class="icon-list">

     <div id="iconSearch">
         <label for="icon-search">Search Icon: </label>
         <input type="text" name="icon-search" value="">
     </div>

     <span class="icon-icon1"></span>
     <span class="icon-icon2"></span>
     <span class="icon-icon3"></span>
     <span class="icon-icon4"></span>
     <span class="icon-icon5"></span>
     <span class="icon-icon6"></span>
     <span class="icon-icon7"></span>
     <span class="icon-icon8"></span>

 </div>

JS:

 var iconVal = $(".icon_field").val();
 $('#selectedIcon').addClass(iconVal);

 $("#selectIconButton").click(function () {
     $("#iconSelector").fadeToggle();
 });

 $("#iconSelector span").click(function () {
     selectIcon($(this));
 });

 function selectIcon(e) {
     var selection = e.attr('class');
     $(".icon_field").val(selection);
     $("#iconSelector").hide();
     $('#selectedIcon').removeClass();
     $('#selectedIcon').addClass(selection).show();
     return;
 }