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的所有图标都被隐藏

jQuery实时过滤/搜索

1 个答案: