Javascript jQuery添加搜索（也许是ajax？）过滤器以查看带有前缀的范围

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

他们将过滤掉一些带有前缀图标的类

我从JSFIDLE开始：

例如：

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

---

一种可能的方法是使用DataTables，该框架包括一个搜索功能，其基于行的tho可能会被修改。或者，如果你想在每个图标上显示一些事实，如大小、名称、创建者，那可能会很好。然后用户可以对高度等进行排序

看一看

---

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

您想要的是这样的： 非常简单，可以随时使用。您可以使用图标选择预先填充可用标记。快速示例：

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

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

编辑2： 从您链接中的示例中，我很快将一些内容组合在一起，以获得您想要的方式：

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>

这对你有用吗

我修改了您的输入字段，稍微添加了一个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); 

---

有超过450个图标，我可能无法在其中键入。我试着看看autocomplete和jQueryUI，但我觉得它可能就是这个功能。还有其他建议吗？autocomplete很简洁，但它会显示图标名称的下拉列表。我在找这样的东西哦，我明白了。你有没有尝试复制你发给我的链接中使用的代码？看起来你可以用图标嵌套一些自定义属性，这样搜索就会像他的一样工作。顺便问一下，你想输入什么来获得一个特定的图标，一种颜色？它应该是一个名字，比如twitter，facebook，tumblr。等等，有超过500个图标！但是这个类都以前缀图标{SEARCH NAME HERE}开始。我试图复制代码，但它崩溃了一切。我不想添加jQuery插件，因为通过插件很难使用wordpress和实现这样的jQuery插件。这可能只是可行的，但它需要按类名搜索，而不是按数据索引属性搜索。图标名称实际上在类中，前缀为icon-例如：class=icon FACEBOOK或class=icon hello示例：我无法添加插件。我使用wordpress作为我网站的后端，添加jquery插件非常复杂，这不是我要找的mate。也许是这样的

<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>

<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);