Question

I have a dropdown list, a textbox and a button. If I types a word in the textbox and click the button then the dropdown list should select the list item according to that word in the textbox.

For example: If I type 23 then the dropdown should lists the item starting 23.

Answer 1

@GG. is a better option using jQuery UI, but here is a very simple working model not using UI: http://jsfiddle.net/flackend/MA95K/2/

HTML:

<input type="text">
<input type="button" value="Button">
<select>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
</select>​

jQuery:

$('input[type="button"]').on('mousedown', function() {

    var search_str = $('input[type="text"]').val()

    $('option[selected="selected"]').removeAttr('selected');

    $('option').each(function() {
        if($(this).text() == search_str)
        {
            $(this).attr('selected', 'selected');
            return false;
        }
    });
});​

---

Edit

Here is a new jsfiddle that uses jQuery UI’s autocomplete: http://jsfiddle.net/flackend/rPGUy/1/

---

Edit

$('option[selected="selected"]').removeAttr('selected'); is basically saying, “find all option tags that have an attribute selected with the value selected, if there are any, and remove that attribute.”

So this, for example:

<select>
    <option>20</option>
    <option selected="selected">21</option>
    <option>22</option>
    <option>23</option>
</select>

Would become this:

<select>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
</select>

So now when we have jQuery select a new option tag it won’t conflict.