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 类。您可以使用 jQuery 来执行此操作，或者将它们具体添加到ul.append()上面第一个脚本中每个类别的添加中。

于 2013-05-11T20:35:54.427 回答