如何自定义jQuery UI自动完成功能？

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 个解决方案

解决方案1
1 2013-05-11 20:35:54

如何自定义jQuery UI自动完成功能？

问题描述

1 个解决方案

解决方案1 1 2013-05-11 20:35:54

解决方案1
1 2013-05-11 20:35:54