HTML 선택 목록을 자동 필터 할 수 있습니까?

Question

상당수 (1000 개 이상) 이름이있는 HTML 선택 목록이 있습니다. 누군가가 입력을 시작하면 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를 사용하지만 선택 목록이 이미로드되어 있기 때문에 순수한 자바 스크립트 옵션을 원합니다. 포인터 누구?

Answer 1

사용이 필터 스크립트 http://www.barelyfitz.com/projects/filterlist/

Answer 2

변경

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

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

에 어디서나 optionText에서 dropdownlist.keypressBuffer을 찾을 수 있습니다.

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 

는 여기에 내가 함께 선택의 무리를 체인 다른 select 이대로 더 효과에서 선택한 것과 selects 필터링하고, 쓴 작은 POC입니다.

아마도 그것은 당신에게 몇 가지 아이디어를 제공 할 수 있습니다 :

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

유이 라이브러리는 AutoComplete라는 기능이 종류를위한 라이브러리가있다.

자동 완성을위한 데이터 소스는 로컬 자바 스크립트 객체 일 수 있으며 마음이 바뀌면 쉽게 Ajax로 전환 할 수 있습니다.

유이 (YUI) 구성 요소는 꽤 정교한 기능으로 사용자 정의 할 수 있습니다.

편집 : 질문에 따라 필요에 따라 선택 상자로 작업 할 수 있는지 잘 모르겠습니다. 가능할 수도 있습니다. ?