CODEWITHSUNDEEP
javascriptinput
baaroz
baaroz

Reputation: 19587

auto complete to select option in javascript

I am trying to make auto complete to select option according to input from the user

something like 

  <input type=text onkeyup=findit()>

<select id="sel">
        <option value="s0001">Adams</option>
        <option value="s0002">Alder</option>
         .
         .
         .
<select>

I found this code 'but it only work on one select in the page( I need multi select)

<html>
<head>

 <script type="text/javascript">


 //initialize some global variables
var list = null;
function fillit(sel,fld) {


        var field = document.getElementById("entry");
        var selobj = document.getElementById("sel");
        if(!list)
        {
                var len = selobj.options.length;
                field.value = "";
                list = new Array();
                for(var i = 0;i < len;i++)
                {
                        list[i] = new Object();
                        list[i]["text"] = selobj.options[i].text;
                        list[i]["value"] = selobj.options[i].value;
                }
        }
        else
        {
            var op = document.createElement("option");
            var tmp = null;
            for(var i = 0;i < list.length;i++)
           {
                tmp = op.cloneNode(true);
                tmp.appendChild(document.createTextNode(list[i]["text"]));
                tmp.setAttribute("value",list[i]["value"]);
                selobj.appendChild(tmp)/*;*/
           }
        }
}


 function findIt(sel,field)
{
        var selobj = document.getElementById("sel");
        var d = document.getElementById("display");
        var len = list.length;
        if(field.value.length > 1)
        {
                if(!list)
                {
                        fillit(sel,field);
                }
                var op = document.createElement("option");
                selobj.options.length = 1
                var reg = new RegExp(field.value,"i");
                var tmp = null;
                var count = 0;
                var msg = "";
                for(var i = 0;i < len;i++)
                {
                        if(reg.test(list[i].text))
                        {
                               // d.childNodes[0].nodeValue = msg;
                                tmp = op.cloneNode(true);
                                tmp.setAttribute("value",list[i].value);
                                tmp.appendChild(document.createTextNode(list[i].text));
                                selobj.appendChild(tmp);
                        }
                } 
        }
        else if(list && len > selobj.options.length)
        {
                selobj.selectedIndex = 0;
                fillit(sel,field);
        }
}




 </script>


</head>
<body onLoad="fillit(sel,entry)">
<div>Enter the first three letters of a street and select a match from the menu.</div>
<form> 
Street
<input type="text" name="Street" id="entry" onKeyUp="findIt(sel,this)"><br>
  <select id="sel">
        <option value="s0001">Adams</option>
        <option value="s0002">Alder</option>
        <option value="s0003">bol</option>
        <option value="s0004">col</option>
        <option value="s0005">dol</option>
        <option value="s0007">Cooper</option>
<!--and so on and so forth-->
  </select> 
</form>
</body>

Any Ideas How to make it work on multi select on the page?

Thanks

Baaroz

Upvotes: 7

Views: 46396

Answers (3)

Kareem
Kareem

Reputation: 5404

An odd way to do that is to change the ID in the script and copy it the number of times you want to use this options in the page. so for example:

select id="sel1"
select id="sel2"
select id="sel3"

and then. copy the script and replace every (sel) with sel1 past it again and replace (sel) with sel2 and so on. not the best solution but it will work. Good Luck

Upvotes: 0

MiGnH
MiGnH

Reputation: 438

Not sure if this would work for you, but chosen.js has a really nice autocomple multi select

http://harvesthq.github.com/chosen/

Upvotes: 11

Jeff Watkins
Jeff Watkins

Reputation: 6359

Usually Autocomplete is for single values, but the jQuery UI autocomplete does have a multiple select function. Perhaps try that? Minimum effort coding for you that way.

Upvotes: 0

Related Questions