I tried to made text input that filtering selectbox. I'm trying to fix it alot of time but it still not working well. Maybe because it is in hebrew?

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>

I need your help!

I tried to made text input that filtering selectbox. I'm trying to fix it alot of time but it still not working well. Maybe because it is in hebrew?

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>

I need your help!

• javascript
• jquery
• html
• each
• indexof

• 1 I'd say filter you data and re-bind your select to the filtered data as opposed to filtering the UI elements. – JsCoder Commented Dec 23, 2014 at 13:53
• please google for underscore/lodash libs they provide with an easy handle for filtering, sorting, aggregating etc. – JsCoder Commented Dec 23, 2014 at 14:17
• 2 is it for an auto plete ? the html5 datalist may be of help to you.W3Schools datalist – Billy Commented Dec 23, 2014 at 14:22

2 Answers 2

$('#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 Hope it helps.

It isn't the most clean way, but something like this should work: http://jsfiddle/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: Here with some Hebrew: http://jsfiddle/milanvanschaik/11146uxb/3/