根据输入jquery中键入文本的第一个字母自动选择下拉列表

Question

Hello I tried to search something equivalent without success, this is not a php based value where one drop down updates another. its a simpler version but I don't know how to proceed

Basically I have a text field like

 <input size="50" name="productname" id="product" type="text" />

 <select name="platform">
    <?php if($manufacturers) foreach($manufacturers as $each) { ?>
           <option value="<?=$each['id']?>"><?=$each[ 'manufacturerName']?></option>
    <?php } ?>
 </select>

I noticed that in about 90% of my scenario if a manufacturer name is Samsung most of its product will start with S that is the first name of the manufacturer.

In my select I have some manufacturers for example , Samsung, Alcatel, Hitachi, from a database.

In this form I am doing user will be adding new product, for example Samsung S6, as he types Samsung, I wish a jquery will set the selected option to the select list to samsung most probably based on the first matching letter.

Answer 1

Try this code, then you can modified with your own creativity.

$('#product').on('keyup', function () {
   var input_val = String($(this).val());
   var sel = $('select[name=platform]');

   if (input_val !== "") {
      var h = $('select option[value*=' + input_val + ']');
      if (h.length > 0) {
          h.prop('selected', true);
      } else {
          sel.val("");
      }
   } else {
      sel.val("");
   }

});

DEMO