使用jQuery過濾選擇框

我試圖對過濾選擇框進行文本輸入。我試圖解決它很多時間，但它仍然不能很好地工作。也許是因爲它是在希伯來語？使用jQuery過濾選擇框

HTML：

<option value="628077"> new york</option> 
<option value="244228">רמת גן<option> 
<option value="641332"> דימונה</option> 
<option value="240812"> הזורעים</option> 
. 
. 
. 
<option value="640375"> עתניאל</option> 
<option value="344580"> חיפה</option> 
<option value="440560"> בית רבן</option> 
<option value="520098"> הרצליה</option> 
</select>

的jQuery：

<script type="text/javascript" > 
     $('#city').keyup(function() { 

      var valthis = $(this).val(); 
      var num = 0; 
      $('select#DropDownList1>option').each(function() { 
       var text = $(this).text(); 
       if(text.indexOf(valthis) != -1) 
       { $(this).show();} 
       else{ $(this).hide();} 

      }); 

     }); 
</script>

我需要你的幫助！

來源

2014-12-23 anonicode

我想過濾你的數據，並重新綁定你的選擇過濾數據，而不是過濾UI元素。 – user1514042

請google爲他們提供的下劃線/ lodash庫提供一個易於處理的過濾，排序，聚合等。 – user1514042

是否適合自動完成？ html5 datalist可能對你有幫助。[W3Schools datalist]（http://www.w3schools.com/tags/tag_datalist.asp） – Billy

$('#city').keyup(function() { 
    var valthis = $(this).val().toLowerCase(); 

    $('select#DropDownList1>option').each(function() { 
     var text = $(this).text().toLowerCase(); 
     if (text.indexOf(valthis) !== -1) { 
      $(this).show(); $(this).prop('selected',true); 
     } 
     else { 
      $(this).hide(); 
     } 
    }); 
});

DEMO希望它能幫助。

來源

2014-12-23 14:33:03

它很好的短名單，我有很長的一個。我需要檢查，我們將在選擇框中鍵入電子郵件將只包含子字符串'ew'，如'new york'或'new ziland'的字符串 – anonicode

我更新了我的anser並演示了http：// jsfiddle。淨/ 1h335x57/5 / –

這不是最乾淨的方式，但這樣的事情應該工作： http://jsfiddle.net/milanvanschaik/11146uxb/2/

$(function() { 
    var data = [ 
     { value: 628077, text: 'New York' }, 
     { value: 628047, text: 'Amsterdam' }, 
     { value: 628037, text: 'Paris' } 
    ]; 

    data.forEach(function(val) { 
     $('#select').append($('<option></option>').attr('value', val.value).text(val.text)); 
    }); 

    $('#city').keyup(function() { 
     var inputValue = $(this).val(); 
     data.forEach(function(val) { 
      if(val.text.toLowerCase().indexOf(inputValue.toLowerCase()) != -1) { 
       $('#select>option[value="'+val.value+'"]').remove(); 
       $('#select').append($('<option></option>').attr('value', val.value).text(val.text)); 
      } else { 
       $('#select>option[value="'+val.value+'"]').remove(); 
      } 
     }); 
    }); 
});

編輯：這裏有一些希伯來語：http://jsfiddle.net/milanvanschaik/11146uxb/3/

來源

2014-12-23 14:28:03

他們是一個選擇做類似的事情，但沒有使用VAR'數據'？我的意思是使用我很長的選項列表，我olrady有。 – anonicode

是的，那是可能的。首先加載數據變量中的所有選項列表值。然後清空它。 http://jsfiddle.net/milanvanschaik/11146uxb/4/ –

使用jQuery過濾選擇框

回答

相關問題