Joe May Joe May - 5 months ago 10
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...
</select>
<input id="itemlist_change" type="text" size="5"/>


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

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


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

Answer

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

  var self = $(this);

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

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>
</select>
<input id="itemlist_change" type="text" size="5" />

Comments