如何自動過濾HTML選擇列表？

Question

我有一個HTML選擇列表，有不少（1000+）名字。我有一個JavaScript的地方，將選擇第一個匹配的名稱，如果有人開始打字。這種匹配着眼於項目的開始：

var optionsLength = dropdownlist.options.length; 
    for (var n=0; n < optionsLength; n++) 
    { 
    var optionText = dropdownlist.options[n].text; 
    if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0) 
    { 
     dropdownlist.selectedIndex = n; 
     return false; 
    } 
    } 

客戶希望有一個建議或自動篩選：名稱應該「發現」包含部分的所有名稱的輸入部分。我見過幾個Google Suggest類似的選項，大多數使用Ajax，但我想要一個純JavaScript選項，因爲選擇列表已經加載了。指點任何人？

Answer 1

使用這種過濾器腳本 http://www.barelyfitz.com/projects/filterlist/

Answer 2

變化

if (optionText.indexOf(dropdownlist.keypressBuffer,0) == 0) 

到

if (optionText.indexOf(dropdownlist.keypressBuffer) > 0) 

要找到dropdownlist.keypressBuffer在optionText任何地方。

Answer 3

我會設置一個緩存來保存我select中的options。而不是在select中篩選options，我將清除select，然後重新填充匹配的options。

僞碼嘉豪：

onLoad: 
    set cache 

onKeyPress: 
    clear select-element 
    find option-elements in cache 
    put found option-elements into select-element 

這裏有一個小POC我寫的，做什麼，從在另一select --in效果鏈一堆選擇一起所選過濾上selects。

也許可以給你一些想法：

function selectFilter(_maps) 
{ 
    var map = {}; 


    var i = _maps.length + 1; while (i -= 1) 
    { 
     map = _maps[i - 1]; 


     (function (_selectOne, _selectTwo, _property) 
     { 
      var select = document.getElementById(_selectTwo); 
      var options = select.options; 
      var option = {}; 
      var cache = []; 
      var output = []; 


      var i = options.length + 1; while (i -= 1) 
      { 
       option = options[i - 1]; 

       cache.push({ 
        text: option.text, 
        value: option.value, 
        property: option.getAttribute(_property) 
       }); 
      } 


      document.getElementById(_selectOne).onchange = function() 
      { 
       var selectedProperty = this 
             .options[this.selectedIndex] 
             .getAttribute(_property); 
       var cacheEntry = {}; 
       var cacheEntryProperty = undefined; 


       output = []; 

       var i = cache.length + 1; while (i -= 1) 
       { 
        cacheEntry = cache[i - 1]; 

        cacheEntryProperty = cacheEntry.property; 

        if (cacheEntryProperty === selectedProperty) 
        { 
         output.push("<option value=" + cacheEntry.value + " " 
         _property + "=" + cacheEntryProperty + ">" + 
         cacheEntry.text + "</option>"); 
        } 
       } 

       select.innerHTML = output.join(); 
      }; 
     }(map.selectOne, map.selectTwo, map.property)); 
    } 
} 


$(function() 
{ 
    selectFilter([ 
     {selectOne: "select1", selectTwo: "select2", property: "entityid"}, 
     {selectOne: "select2", selectTwo: "select3", property: "value"} 
    ]); 
}); 

Answer 4

的YUI庫有這種功能，被稱爲AutoComplete庫。

AutoComplete的DataSource可以是本地javascript對象，或者如果您改變主意，可以輕鬆切換到Ajax。

YUI組件是相當可定製的一些公平的功能。

編輯：我不確定您是否可以按照問題要求使用選擇框。可能是可能的。