0

我正在构建一个图标库，前端的用户（提交表单）可以选择一个图标。就选择过程而言，我设法使一切正常。现在，最终产品将有 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;
 }
4

3 回答 3

0

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

看看这里

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

于 2013-07-30T13:56:29.580 回答
0

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

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

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

EDIT2：从您链接中的示例中，我迅速将一些东西放在一起以按照您想要的方式进行操作：

代码：

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

data-index现在，如果您键入“red”，您将获得第一个跨度，因为搜索正在从属性中寻找匹配项。您可以将它们替换为“Facebook”、“Twitter”或任何您的图标名称。

如果您想直接从类名中搜索，您可以执行以下操作：

<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>
于 2013-07-30T13:57:15.807 回答
0

这对你有用吗？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);
于 2013-07-30T14:59:24.133 回答