使用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过滤选择框

回答

相关问题