Search a dropdown

Question

I have this HTML dropdown:

<form>
  <input type="text" id="realtxt" onkeyup="searchSel()">
  <select id="select" name="basic-combo"  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-combo').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?

Answer 1

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

document.getElementById("basic-combo")

is wrong, as the id is select, while "basic-combo" 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 become confusing.

Answer 2

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<output.length;i++) {
          var val = output[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.

Answer 3

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

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
});