jquery 사용자 자동 완성 기능을 사용자 정의하는 방법은 무엇입니까?

jquery UI 자동 완성 기능을 사용하고 있으며 드롭 다운에 나타나는 용어 목록에 용어를 분류 할 수있는 방법이 있습니까? 기본적으로 내가 원하는 것은 다음과 같습니다. 드롭 다운 메뉴에서 용어의 출처에 따라 배경색이 특정 색상이됩니다. 당신이 JQuery와 UI를 자동 완성 이니셜이 통과, 그리고jquery 사용자 자동 완성 기능을 사용자 정의하는 방법은 무엇입니까?

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

하고 드롭 다운 노란색 배경 색상으로 조건을 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 클래스를 추가해야합니다. 위의 첫 번째 스크립트에서 ul.append()의 각 카테고리 추가에 구체적으로 추가하도록 jQuery를 사용할 수 있습니다.

출처

2013-05-11 20:35:54 Nomad101

jquery 사용자 자동 완성 기능을 사용자 정의하는 방법은 무엇입니까?

답변

관련 문제