Question

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

他们的搜索将过滤掉一些带有前缀“icon - ”的类。

我在这里开始使用jsFiddle：http://jsfiddle.net/yQMvh/28/

一个例子是这样的： http://anthonybush.com/projects/jquery_fast_live_filter/demo/

我的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（注意：这包括选择jQuery）：

 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

一种可能的方法是使用DataTables，这个框架包括一个搜索功能，它的行基于tho，可能会被修改。或者如果你想用尺寸，名称，创作者等一些事实来呈现每个图标，那么它可能会很好。然后用户可以对高度等进行排序。

看看here

它的重量有点重，但有很多优化的可能性

Answer 2

您正在寻找的是这样的：http://jqueryui.com/autocomplete/ 非常简单，随时可以使用。您可以使用图标选择预填充可用标记。快速举例：

$(function() {
  var availableTags = [
    "icon-name1",
    "icon-name2",
    "icon-name3",
    "etc."    
  ];
  $( "input[name=icon-search]" ).autocomplete({
    source: availableTags
  });
});

编辑：当然你可以做一些更复杂的事情，比如在每个结果旁边显示你的图标的缩略图/预览

EDIT2：从您链接中的示例中，我迅速将某些内容放在一起以便按照您希望的方式进行操作：

JSCODE：

<script>
  $(function() {
    $.expr[':'].Contains = function(a,i,m){
      return ($(a).attr("data-index") || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
    };

  function listFilter(header, list) {

    $("input.filterinput")
      .change( function () {
        var filter = $(this).val();
        if(filter) {
          $(list).find("span:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("span:Contains(" + filter + ")").parent().slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

  $(function () {
    listFilter($("#iconSearch"), $("#list"));
  });
});
</script>

你的html代码稍微调整一下：

<div id="iconSelector" class="icon-list" style="display: block;">
    <div id="iconSearch">
        <label for="icon-search">Search Icon: </label>
        <input type="text" name="icon-search" class="filterinput" value="">
    </div>
    <ul id="list">
        <li><span class="icon-icon1" data-index="red"></span></li>
        <li><span class="icon-icon2" data-index="yellow"></span></li>
        <li><span class="icon-icon3" data-index="blue"></span></li>
      </ul>
</div>

现在，如果您键入＆＃34; red＆＃34;您将获得第一个跨度，因为搜索正在查找data-index属性的匹配项。您可以用＆＃34; Facebook＆＃34;，＆＃34; Twitter＆＃34;或者您的图标名称替换它们。

如果你想直接从类名中搜索，你可以这样做：

<script>
$(function() {
  $.expr[':'].Contains = function(a,i,m){
      return ($(a).attr("class") || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };

  function listFilter(header, list) {

    $("input.filterinput")
      .change( function () {
        var filter = "icon-" + $(this).val();
        if(filter) {
          $(list).find("span:not(:Contains(" + filter + "))").parent().slideUp();
          $(list).find("span:Contains(" + filter + ")").parent().slideDown();
        } else {
          $(list).find("li").slideDown();
        }
        return false;
      })
    .keyup( function () {
        $(this).change();
    });
  }

  $(function () {
    listFilter($("#iconSearch"), $("#list"));
  });
});
</script>

Answer 3

这对你有用吗？ http://jsfiddle.net/yQMvh/37/

我稍微修改了你的输入字段（添加了一个id）

<input type="text" id="txt-icon-search" name="icon-search" />

并添加了这段代码。

/**
 *    Holds information about search. (document later)
 */
var search = {
    val: '',
    icons: function (e) {
        // get all the icons.
        var icons = $('span[class*="icon-"]');

        // assign the search val. (can possibly use later)
        search.val = $(e.currentTarget).val();

        // let the looping begin!
        for (var i = 0, l = icons.length; i < l; i++) {

            // get the current element, class, and icon after "icon-"
            var el = $(icons[i]),
                clazz = el.attr('class'),
                iconEnd = clazz.substr(5, clazz.length);

            // was the value found within the list of icons?
            // if found, show.
            // if not found, hide.
            (iconEnd.indexOf(search.val) === -1) ? el.hide() : el.show();
        }
    }
};

$('#txt-icon-search').keyup(search.icons);

jQuery添加搜索（ajax，也许？）过滤器来查看带有前缀的跨度

3 个答案: