1

jquery ui オートコンプリートを使用しています。ドロップダウンに表示される用語のリストについて、用語を分類する方法はありますか? 基本的に私が欲しいのは：ドロップダウンメニューでは、用語がどのカテゴリに属しているかに応じて、その背景色が特定の色になります。次のような辞書を定義するようなもの：

var dictionary = {"apple":"red", "banana":"yellow"};

次に、これを jquery ui オートコンプリート イニシャライザに渡すと、ドロップダウンには、apple背景色が赤の用語と背景色bananaが黄色の用語が含まれます。

これは可能ですか？

ありがとう。

4

1 に答える 1

1

これは完全に可能です このJquery-ui-Autocomplete Catagories を見てください

基本的な要点は次のとおりです。

<style>
    .ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
    }
</style>
<script>
  $.widget( "custom.catcomplete", $.ui.autocomplete, {
       _renderMenu: function( ul, items ) {
             var that = this,
             currentCategory = "";
             $.each( items, function( index, item ) {
                 if ( item.category != currentCategory ) {
                      ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                      currentCategory = item.category;
                      }
                  that._renderItemData( ul, item );
             });
       }
   });
</script>
<script>
   $(function() {
   var data = [
     { label: "anders", category: "" },
     { label: "andreas", category: "" },
     { label: "antal", category: "" },
     { label: "annhhx10", category: "Products" },
     { label: "annk K12", category: "Products" },
     { label: "annttop C13", category: "Products" },
     { label: "anders andersson", category: "People" },
     { label: "andreas andersson", category: "People" },
     { label: "andreas johnson", category: "People" }
  ];

   $( "#search" ).catcomplete({
     delay: 0,
     source: data
    });
  });
</script>
</head>
<body> 
   <label for="search">Search: </label>
   <input id="search" />
</body>

ここでやりたいことは、.ui-autocomplete-catagoryCSS クラスを変更して、カテゴリの一般的な概念を取得することです。特定のカテゴリにさまざまな色を持たせるには、独自の CSS クラスを追加する必要があります。ul.append()jQuery を使用してこれを行うか、上記の最初のスクリプトの各カテゴリの追加時に具体的に追加することができます。

于 2013-05-11T20:35:54.427 に答える