Question

我正在使用jquery ui自动填充功能，对于下拉列表中显示的术语列表，是否有一种方法可以对术语进行分类？基本上我想要的是：在下拉菜单中，根据术语的类别，其背景颜色将是某种颜色。像你这样定义一个字典：

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

然后，您将其传递给jquery ui自动完成初始值设定项，下拉列表中的apple项的背景颜色为红色，banana的背景颜色为黄色。

这可能吗？

感谢。

Answer 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-catagory CSS类以获得类别的一般概念，以便使特定类别具有添加自己的CSS类所需的不同颜色。您可以使用jQuery执行此操作，或者在上面第一个脚本的ul.append()中添加每个类别时具体添加它们。

如何自定义jquery ui自动完成？

1 个答案: