縮小從文本搜索使用jQuery的選擇選項

Question

我在選擇標記和輸入文本框中有一些選項。一旦用戶在文本框中輸入內容，應該顯示相關的選項，其餘的需要隱藏。

<select size="8" style="width:150;"> 
    <option value="something1">Apple</option> 
    <option value="something1">Banana</option> 
    <option value="something2">Mango</option> 
    <option value="something2">Orange</option> 
    <option value="something2">Papaya</option> 
    <option value="something3">Grape</option> 
    <option value="something3">Coco</option> 
    <option value="something3">Chocolate</option> 
</select> 
    <input type="text" > 

當我在文本框中，只有蘋果進入ap，木瓜應該是可見的。請讓我知道我是如何通過jQuery的做到這一點..

Answer 1

演示：http://so.devilmaycode.it/narrow-down-the-select-options-from-text-search-using-jquery

 $(function() { 
       $('input.search').on('change', function() { 
        $(this).prev('select.term').find('option:not(:containsi(' + this.value + '))').hide(); 
       }).on('keyup', function() { 
        $(this).prev('select.term').find('option:containsi(' + this.value + ')').show().attr('selected', true); 
       }).extend($.expr[':'], { 
       'containsi' : function(elem, i, match, array) { 
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || '').toLowerCase()) >= 0; 
       } 
      }); 
     }); 

Answer 2

我建議你搜索看看這個SO後：

Jquery: Filter dropdown list as you type

或本例中URL

http://andrew.hedges.name/experiments/narrowing/