<div style= "float:left;margin-right:5px;" > <input value= "" Id= "Selectinput"onkeyup= "Searchitem (This, ' Selectmem ');" Style= "width:150px;height:24px;line-height:24px;border:1px solid #929292; font-size:14px;border-radius:2px;" Type= "Text" > <select size= "5" value= "" id= "Selectmem" style= "Display:block;width:154px;margin-top:5 px;border:1px solid #929292; " > <option value= "14cda0c4-0837-4311-a071-3987cf268cc1" > Small plums </option> <option VA Lue= "641f116a-e0ae-48bc-ad2b-d96686250eb7" > Little Prince </option> <option value= "41ad48a9-9c49-4525-9f9b-9d d6bad9b734 "> Flower </option> <option value=" c06061fd-6b79-486c-b6af-56c2f941c69f "> Lele </option> <option value= "d0a6f33b-4ff5-400c-b5d3-2e81d7528764" > Takayama </option> <option value= " 5ba44538-ed19-4644-844b-8acec1e11bde "> Sea of Clouds </option> <option value=" be35d654-6de8-4603-8d94-57d9d99a e561 "> Cloud printing </option> <option value=" fc8d5cbe-b979-4564-8357-eeafff801a0d "> Water droplets </option> </select> </div>
Setting the onkeyup event on input, triggering when entering text
functionSearchitem (e,myselectid) {varKeywords =$ (E). Val (); Keywords=keywords.replace (//g, "")//Remove spacesvarmyselect=$ ("#" +myselectid) [0];//get the Select Object if(keywords!= ""){ for(i=0;i<myselect.length;i++)//loop Option { if(Myselect.options[i].text.indexof (keywords)!=-1)//determines whether the text of option contains keyword{$option=$ (myselect.options[i]); $ (myselect.options[i]). Remove (); $ (myselect). prepend ($option); } } } //alert (myselect.options.length);}
Select text Input Query