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

我正在使用jquery ui autocomplete，并且出现在下拉列表中的术语列表中，有没有办法让您可以对术语进行分类？基本上我想要的是：在下拉菜单中，根据术语来自何种类别，其背景颜色将是某种颜色。就像你定义的东西像一本字典：如何自定义jquery ui自动完成？

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

然后，你把它传递给jQuery用户界面自动完成初始化，并在下拉将有条款apple有一个红色的背景颜色，banana黄色背景颜色。

这可能吗？

谢谢。

来源

2013-05-11 omega

这是完全有可能先来看看这个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()的每个类别的添加中具体添加它们。

来源

2013-05-11 20:35:54 Nomad101

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

回答

相关问题