jQuery live filter/search

Question

我正在构建一个图标库，前端（提交表单）的用户可以选择一个图标。我设法让所有工作都尽可能地按照选择过程进行。现在，最终产品将有超过400个图标，并且我想添加一个搜索（ajax，我猜）或自动完成输入，用户可以在其中输入几个字母，并过滤掉这些图标。

他们的搜索将过滤出一些带有前缀“icon-”的类，因此搜索词将是该前缀之后的任何内容。 （即：icon-TWIITER，图标-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的图标会被隐藏