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://cheeaun.github.io/jquery.livefilter/

我试图远离 jQuery 插件，并在我求助之前尝试解决这个问题。我使用 wordpress 作为网站的后端。

一旦用户键入，它就已经在整理出与输入值相关的图标。

我的 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;
 }

Answer 1

更新了您的 jsfiddle jsfiddle.net/yQMvh/30 只需输入类名，例如icon-icon1 和所有没有 icon-icon1 的图标都被隐藏