I am trying to actually show the options when i write something in textbox. when i write any thing in a textbox then all the matching options should shows up.

my code looks like

$('#location_from_input').keyup(function() {
  var txt = $(this).val().toLowerCase();

  $('#location_from>option').each(function() {
    var text = $(this).text();
    textL = text.toLowerCase();
    (textL.indexOf(txt) == 0) ? window.alert(text): $(this).hide();
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selector">
  <input type="text" placeholder="Going From" id="location_from_input" />
  <select name="location_from" class="full-width" id="location_from" onchange="document.getElementById('location_from_input').value=this.options[this.selectedIndex].text">
    <option value="location_1">Location 1</option>
    <option value="location_2">Location 2</option>
    <option value="location_3">Location 3</option>
  </select>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You cannot open a <select> programmatically. Only the user can do this.

The functionality you want is in a different element type datalist, and it doesn't even require Javascript:

<label for="myBrowser">Pick your browser:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

to do this, you must act in this way: (textL.indexOf(txt) != -1) ? window.alert(text): $(this).hide();