JS Auto-complete instance

varOinputfield, Opopdiv, ocolorsul,acolors; //Initialize VariablesfunctionInitvars (modelid,divid,ulid) {Oinputfield=document.getElementById (ModelID); Opopdiv=document.getElementById (divID); Ocolorsul=document.getElementById (ulid);}//Check machine species, the number of automatic fillingfunctionFindmodel (div_id,ul_id,model_id,form_id,p_cbo_id) {varKeyCode =Event.keycode; varArraystr = ' ';    Initvars (model_id,div_id,ul_id); varAresult =NewArray ();//for storing matching results    varparams = document.getElementById (model_id). value;//serialized Tabular Data "MyForm1" as the ID of the table    if((keycode >= && keycode <= 90) | | (KeyCode >= && keycode <= 57) | | KeyCode = = 8 | | KeyCode = = 46) {//key letters, numbers, delete keys to filter        if(OInputField.value.length >= 2) {//more than two people start checking$.ajax ({type:' Post ', data:{' ModelName ':p Arams}, DataType:' JSON ', URL:' Querypart.action ', Success:function(data) {if(Data = = "Error" | | data = =NULL|| data = = "") {Clearmodel (); return; } document.getElementById (div_id). Style.display= ' Block '; $.each (data,function(index,element) {arraystr+=element.model_name+ ', ' +element.part_no+ ', ' +element.route_id+ ' $ ';                }); Aresult= Arraystr.split ("$");            Setmodel (model_id,div_id,aresult,p_cbo_id);        }         }); }Else{Clearmodel ();//clear Prompt box without input        }    } }//Clear Prompt ContentfunctionClearmodel () { for(vari = ocolorsul.childnodes.length-1; I >= 0; i--) Ocolorsul.removechild (Ocolorsul.childnodes[i]); Opopdiv.classname= "Hide";}//Set auto-complete datafunctionSetmodel (modelid,divid,the_models,p_cbo_id) {//Display the Prompt box, the passed-in parameter is an array of matching resultsClearmodel ();//each letter is entered to clear the original prompt, and then continueOpopdiv.classname = "Show"; varOLi;  for(vari = 0; i < the_models.length; i++ ){        //Show the results of matching prompts to the user individuallyOLi = document.createelement ("li");        Ocolorsul.appendchild (OLi);                Oli.appendchild (document.createTextNode (the_models[i)); Oli.onmouseover=function(){             This. ClassName = "MouseOver";//highlight when the mouse pointer passes over} oli.onmouseout=function(){             This. ClassName = "MouseOut";//restore the mouse pointer as it left} Oli.onclick=function(){            //When a user clicks a match, sets the input box to the value of the itemOinputfield.value = This. Firstchild.nodevalue; Clearmodel ();//clear the Prompt box at the same timedocument.getElementById (divid). style.display = ' None ';        Getprocessnames (modelid,p_cbo_id); }    }}

JSP Code:

<S:textfieldtitle= "Please enter the machine type keyword, at least two bits"name= "ModelName"size= "+"ID= "model_id"onkeyup= "Findmodel (' Popup_wip ', ' Model_colors_ul_wip ', this.id, ' querywipform ', ' P_cbo_id_wip ');"CssClass= "Required"></S:textfield><DivID= "Popup_wip">      <ulID= "Model_colors_ul_wip"></ul></Div>

CSS style code

<style><!--#popup_wip{            /*style of the cue box div block*/position:Absolute;width:200px;Color:#004a7e;font-size:12px;font-family:Arial,helvetica,sans-serif; Left:43px;Top:28px;Background-color:#E6EAE9;Overflow:Auto;Height:50px;Display:None;        }#popup_wip. Show{            /*display the border of the prompt box*/Border:1px solid #004a7e;        }#popup_wip. Hide{            /*hide the border of a cue box*/Border:None;        }        /*style style of the cue box*/ul{List-style:None;margin:0px;padding:0px;        }Li.mouseover{Background-color:#004a7e;Color:#FFFFFF;        }Li.mouseout{Background-color:#FFFFFF;Color:#004a7e;        } -</style>

Action Code:

Private list<map<string,object>> listparts;
Publicvoid  Querypart () {        new  Iquerydaoimpl ();         = Query.querypart (modelname.touppercase ());         = Jsonarray.fromobject (listpartmaps);         Try {            servletactioncontext.getresponse (). Getwriter (). print (Jsonarray);         Catch (IOException e) {            e.printstacktrace ();        }    }

DAO Code:

     PublicList<map<string,object>>Querypart (String modelname) {db=NewDBManager (); String SQL= "Select part_id,model_name,part_no,route_id from Sajet.sys_part where Upper (model_name) like Upper (?) and enabled = ' Y ' O Rder by Model_name "; List<Map<String,Object>> Listpart =NewArraylist<map<string,object>>(); Try{Connection=db.            Getoraconnection (); Pstmt=connection.preparestatement (SQL); Pstmt.setstring (1, modelname+ "%"); RS=Pstmt.executequery ();  while(Rs.next ()) {Map<String,Object> map =NewHashmap<string,object>(); Map.put ("Part_id", Rs.getint ("part_id")); Map.put ("Model_name", Rs.getstring ("Model_name")); Map.put ("Route_id", Rs.getint ("route_id")); Map.put ("Part_no", Rs.getstring ("Part_no"));            Listpart.add (map); }        } Catch(SQLException e) {log.error ("Error occurred while querying the machine:" +e.getmessage ());        E.printstacktrace (); }finally{db.closeconnection (connection, RS, pstmt); }        returnListpart; }

JS Auto-complete instance