JQ+CSS Simulation Fuzzy search drop-down box implementation

Html:

@* input Box *@<Div>    <inputtype= "text"style= "width:85%; height:34px;"onkeyup= "Inputchange (this)"ID= "Txtinput"></Div>@* analog drop-down box *@<Divclass= "Divselect"ID= "Dpselect"></Div>

Css:

/*selection Box Effect*/. Divselect{float: Left;position:relative;Z-index:3003;background:#fff;Display:None;width:85%;}. Divselect ul{padding:0;margin:0;Border:1px solid #E4E4E4;Background-color:#ffffff;position:Absolute;Z-index:30000;Margin-top:-1px;width:100%;Overflow:Auto;Max-height:200px;}. Divselect ul Li{List-style-type:None;cursor:Pointer;Height:24px;Line-height:24px;}. Divselect ul li:hover{background:#ccc;}

Js:

<script type= "Text/javascript" >//Click the drop-down box outside the simulation drop-down box to disappear$ (document). Bind (' click ',function(e) {varE = e | | window.event;//Browser Compatibility        varElem = E.target | |e.srcelement;  while(Elem) {//loop judgment to the node, prevent the click is div child element            if(elem.id && elem.id = = ' Dpselect ') {                return; } elem=Elem.parentnode; }        $(' #dpSelect '). CSS (' Display ', ' none ');//The click is not a div or its child elements    }); //Inputchange method of using text box onkeyup Event Trigger Inputchange method to determine whether text box text changes text changes trigger Searchorgname method    varSoldvalue; Soldvalue= ""; functionInputchange (ARG) {varVnewvalue =$ (ARG). Val (); if(Soldvalue! =vnewvalue) {            //query results based on criteria and assign values dynamically to drop-down boxesSearchname (ARG); Soldvalue=Vnewvalue; }    }    functionSearchname (ARG) {varName =$ (ARG). Val (); //returns False if the search box is empty        if(Name = = "") {            $("#dpSelect"). attr ("style", "Display:none")); return false; }        Else {            $("#dpSelect"). attr ("style", "Display:block")); }        //fetching data and dynamically assigning HTML to the drop-down box$.ajax ({type:"POST", URL:"......", data: {name:name}, DataType:"", Async:false, Success:function(data) {varSTRs = ""; STRs+ = "<ul>";  for(vari = 0; i < data.length; i++) {STRs+ = ' <li onclick= "SetValue (This)" > ' + data[i] + ' </li> '; } STRs+ = "</ul>"; $("#dpSelect"). HTML (STRs); }, Error:function() {alert ("Query Error");    }        }); }    //Click the Simulate drop-down box to assign a value to the text box close the drop-down box    functionSetValue (ARG) {varValue =$ (ARG). text (); $("#txtInput"). val (value); $("#dpSelect"). attr ("style", "Display:none")); }</script>

JQ+CSS Simulation Fuzzy search drop-down box implementation