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

このフレームワークには検索機能が含まれており、その行ベースのトーはおそらく変更できます。または、各アイコンにサイズ、名前、作成者などの事実を提示したい場合は、おそらく良いでしょう. その後、ユーザーは高さなどを並べ替えることができます。

こちらをご覧ください

少し重いですが、最適化の可能性がたくさんあります

于 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：あなたのリンクのサンプルから、私はすぐに何かを一緒に投げて、あなたが望むようにしました：

JS コード:

<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 に答える