javascript - Search a dropdown - Stack Overflow

I have this HTML dropdown:

<form>
  <input type="text" id="realtxt" onkeyup="searchSel()">
  <select id="select" name="basic-bo"  size="1">
    <option value="2821">Something </option>
    <option value="2825">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Something </option>
    <option value="2842">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Something </option>
    <option value="2843">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Something </option>
    <option value="15999">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Something </option>
  </select>
</form>

I need to search trough it using javascript. This is what I have now:

function searchSel() {
  var input=document.getElementById('realtxt').value.toLowerCase();
  var output=document.getElementById('basic-bo').options;
  for(var i=0;i<output.length;i++) {
      var outputvalue = output[i].value;
      var output = outputvalue.replace(/^(\s|&nbsp;)+|(\s|&nbsp;)+$/g,"");
    if(output.indexOf(input)==0){
      output[i].selected=true;
      }
    if(document.forms[0].realtxt.value==''){
      output[0].selected=true;
      }
  }
}

The code doesn't work, and it's probably not the best.

Can anyone show me how I can search trough the dropdown items and when i hit enter find the one i want, and if i hit enter again give me the next result, using plain javascript?

I have this HTML dropdown:

<form>
  <input type="text" id="realtxt" onkeyup="searchSel()">
  <select id="select" name="basic-bo"  size="1">
    <option value="2821">Something </option>
    <option value="2825">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Something </option>
    <option value="2842">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Something </option>
    <option value="2843">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Something </option>
    <option value="15999">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_Something </option>
  </select>
</form>

I need to search trough it using javascript. This is what I have now:

function searchSel() {
  var input=document.getElementById('realtxt').value.toLowerCase();
  var output=document.getElementById('basic-bo').options;
  for(var i=0;i<output.length;i++) {
      var outputvalue = output[i].value;
      var output = outputvalue.replace(/^(\s|&nbsp;)+|(\s|&nbsp;)+$/g,"");
    if(output.indexOf(input)==0){
      output[i].selected=true;
      }
    if(document.forms[0].realtxt.value==''){
      output[0].selected=true;
      }
  }
}

The code doesn't work, and it's probably not the best.

Can anyone show me how I can search trough the dropdown items and when i hit enter find the one i want, and if i hit enter again give me the next result, using plain javascript?

• javascript
• drop-down-menu

Share Improve this question Follow edited Jul 21, 2009 at 0:02 Sindre Sorhus asked Jul 15, 2009 at 10:50 Sindre SorhusSindre Sorhus 63.5k4040 gold badges175175 silver badges236236 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here's the fixed code. It searches for the first occurrence only:

function searchSel() {
    var input  = document.getElementById('realtxt').value;
    var list   = document.getElementById('select');        
    var listItems = list.options;

    if(input === '')
    {
       listItems[0].selected = true;
       return;
    }

    for(var i=0;i<list.length;i++) {
          var val = list[i].value.toLowerCase();
          if(val.indexOf(input) == 0) {
            list.selectedIndex = i;
                return;
          }
    }
}

You should not check for empty text outside the for loop. Also, this code will do partial match i.e. if you type 'A', it will select the option 'Artikkelarkiv' option.

Right of the bat, your code won't work as you're selecting the dropdown wrong:

document.getElementById("basic-bo")

is wrong, as the id is select, while "basic-bo" is the name attribute.

And another thing to note, is that you have two variable named output. Even though they're in different scopes, it might bee confusing.

For stuff like this, I'd suggest you use a JavaScript library like jQuery (http://jquery.) to make DOM interaction easier and cross-browser patible.

Then, you can select and traverse all the elements from your select like this:

$("#select").each(function() {
    var $this = $(this); // Just a shortcut
    var value = $this.val(); // The value of the option element
    var content = $this.html(); // The text content of the option element
    // Process as you wish
});