Joe May Joe May -5 years ago 109
HTML Question

Select option(s) - to change - upon typing data into external input field?

I have this pure HTML code..

<select id="itemlist">
<option value = "1">Domes</option>
<option value = "2">Lots</option>
<option value = "3">Dot games</option>
<option value = "4">Bikes</option>
and so on...
<input id="itemlist_change" type="text" size="5"/>

Upon typing "d" (or "do") into an input field
I wish for jquery just to show this..

<select id="itemlist">
<option value = "1">Domes</option>
<option value = "3">Dot games</option>

It is some sort of useful
search function. Any simple jquery stuff for this? Thx.

Answer Source

$('#itemlist_change').on('keyup blur', function() {

  var self = $(this);

  $('#itemlist option')
    .filter(function() {
      return $(this).text().toLowerCase().indexOf(self.val().toLowerCase()) < 0;

<script src=""></script>
<select id="itemlist">
  <option value="1">Domes</option>
  <option value="2">Lots</option>
  <option value="3">Dot games</option>
  <option value="4">Bikes</option>
<input id="itemlist_change" type="text" size="5" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download