Home/ Questions/Q 8012069
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T19:13:00+00:00

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

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

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

    • 0