фильтровать поле выбора с помощью jQuery

Question

Я попытался сделать ввод текста, который фильтрует selectbox. Я пытаюсь исправить это много времени, но он все еще не работает. Возможно, потому что он на иврите?

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> 

мне нужна ваша помощь!

Answer 1

$('#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 Надеюсь, что это помогает.

Answer 2

Это не самый чистый способ, но что-то, как это должно работать: 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(); 
      } 
     }); 
    }); 
}); 

Edit: Вот с какой-еврейски: http://jsfiddle.net/milanvanschaik/11146uxb/3/