JQuery文本輸入自動完成數值樹

Question

每個人

我有一個文本輸入內容應限制爲一組值。這些值的形式爲dependency1，dependency2，dependency3，因此它們形成一棵樹。我想爲這個瞭解這個結構的領域提供一個智能的自動完成。舉例來說，結構是這樣的：

Engineering 
    Electric 
    Communication 
    Power 
    Electronic 
    Computation 
    Control 
Economy 
    Economy 
    Accounting 
Education 
    Basic 
    Language 
    English 
    French 
    Sciences 
    Math 
    Physics 

所以一旦用戶輸入足夠的字母，第一依賴應該完成，它應該是準備好自動完成下一依賴性。如果某個選項出現在彈出窗口中，它們應該僅限於我們所在的依賴項，而不是全部樹。

你知道任何提供類似這樣的jQuery（或其他）庫嗎？

在此先感謝。應該對SO要求，但有一個叫jQuery的UI插件，這是依賴於jQuery的，具有內置的自動完成插件問題

Answer 1

找到了另一個關於值分組搜索的小提琴。他的工作是多一點 - 我認爲這會工作得很好 - 我只有分組的一個級別，但更可以增加，我認爲：

http://jsfiddle.net/Kieveli/c1wgjLfv/3/

HTML：

<label for="search">Search: </label> 
<input id="search"> 

CSS：

.ui-autocomplete-category { 
     font-weight: bold; 
     padding: .2em .4em; 
     margin: .8em 0 .2em; 
     line-height: 1.5; 
    } 
    .ui-menu .ui-menu-item { 
     padding: 0em 1.5em; 
     width: 220px; 
     clear: both; 
    } 
    .Products { 
     width: 220px; 
    } 
    .People { 
     width: 220px; 
    } 

的jQuery：

$.widget("custom.catcomplete", $.ui.autocomplete, { 

    _create: function() { 
     this._super(); 
     this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)"); 
    }, 

    _renderMenu: function(ul, items) { 

     var that = this, 
     currentCategory = ""; 

     $.each(items, function(index, item) { 
      var li; 
      if (item.category != currentCategory) { 
       ul.append("<li class='ui-autocomplete-category " + item.category + "'>" + item.category + "</li>"); 
       currentCategory = item.category; 
      } 

      li = that._renderItemData(ul, item); 

      if (item.category) { 
       li.attr("aria-label", item.category + " : " + item.label); 
      } 
     }); 
    }, 

    _renderItem: function(ul, item) { 
     return $("<li>") 
     .addClass(item.category) 
     .attr("data-value", item.value) 
     .append($("<a>").text(item.label)) 
     .appendTo(ul); 
    } 
}); 

$(function() { 
    var data = [ 
     { label: "annhhx10", category: "Products" }, 
     { label: "annk K12", category: "Products" }, 
     { label: "annttop C13", category: "Products" }, 
     { label: "bannttop C13", category: "Products" }, 
     { label: "cannttop C13", category: "Products" }, 
     { label: "dannttop C13", category: "Products" }, 
     { label: "eannttop C13", category: "Products" }, 
     { label: "fannttop C13", category: "Products" }, 
     { label: "gannttop C13", category: "Products" }, 
     { label: "hannttop C13", category: "Products" }, 
     { label: "iannttop C13", category: "Products" }, 
     { label: "jannttop C13", category: "Products" }, 
     { label: "anders andersson", category: "People" }, 
     { label: "andreas andersson", category: "People" }, 
     { label: "andreas johnson", category: "People" }, 
     { label: "bandreas johnson", category: "People" }, 
     { label: "candreas johnson", category: "People" }, 
     { label: "dandreas johnson", category: "People" }, 
     { label: "eandreas johnson", category: "People" }, 
     { label: "fandreas johnson", category: "People" }, 
     { label: "gandreas johnson", category: "People" }, 
    ]; 

    $("#search").catcomplete({ 
     delay: 0, 
     source: data 
    }); 
}); 

Answer 2

不完全類型看看：

http://jqueryui.com/demos/autocomplete/