Focus on ui--useful techniques: Fuzzy search

In today's projects. Need to do fuzzy search, on the basis of technology has been very fast completed the first edition. Let's take a look at the first version of the effect, we will do a comment:

0 Basics:

We may be part of the source code (the attachment will have the source code)

<span style= "FONT-SIZE:18PX;" > <div style= "position:absolute;background-color:white;border-style:solid;border-width:1px;padding-top:2px ;" ><table><thead><tr><th> name </th><th> gender </th></tr></thead ><tbody><tr><td> Zhang Shan </td><td> male </td></tr><tr><td> John Doe </ td><td> women </td></tr><tr><td> Harry </td><td> men </td></tr>< Tr><td> for six </td><td> male </td></tr><tr><td>Rain</td><td> male </td></tr><tr><td>MAXMAN</td><td> female &LT;/TD&GT;&LT;/TR&GT;&LT;TR&GT;&LT;TD > Wangliuqi </td><td> male </td></tr><tr><td> li character </td><td> female </td></ tr><tr><td> John Doe </td><td> male </td></tr></tbody></table><br/ ></div></span>

Simple upgrade:

It is very obvious that we can see it. We leaked the data and leaked the data to the user on the interface. This is very critical, after the familiar Ajax Technical transformation, we immediately out of the second edition:

       

but then, the test gave two Bug : 1 . The selected item is not marked;2. Input Kanji not responding

Detail Adjustment:

For these we added the code:

To solve the problem of Chinese characters, we changed the triggering event from onkeypress() to Onpropertychange()

Difference: Onpropertychange is the change of the detection attribute. The change of the Chinese character is the change of the attribute value. To conquer the onkeypress only to identify English and digital defects.

Summary:

Through our self-test and responsible testing. We have a small function on the UI , fuzzy search changed N times, which is precisely in line with the concept of user first. We should deepen the idea that for users, the interface is all, in the optimization of the UI . Should be in the scope of consent to spare no effort for users to think, for the user to do. Like I just entered the company when a colleague said, let users think a little more, do one more step, users will be angry!

Attachment (source code): 0 Base:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" lang= "en" >
Simple upgrade:
&LT;TD align=center class= "Module_title_text" style= "text-align:right;padding-right:8px" > Staff name &LT;/TD&GT;&LT;TD ><input type= "text" id = "Employeefullnames" name= "Baseemployeeforquery.employeefullname" size= "class=" Module_input_01 "id=" "maxlength=" "value=" "onkeypress=" Inputworkercode (This) "/><script charset=" Utf-8 " Type= "Text/javascript" >//fuzzy query user function Inputworkercode (userinput) {//Get user input var name = Userinput.value;if (1==1) { $.ajax ({url: "otherpeople_queryuserbyinput_include_json.action", type: "POST", Data:jquery (Document.forms[0]). Serializearray (), Success:function (resobj) {if (Resobj.trim () = = "") {$ ("#inputQueryUser"). Hide (); else{//adds the HTML code returned in the background to the result display div in $ ("#inputQueryUser"). HTML (resobj); $ ("#inputQueryUser"). Show ();}});}} The user selects a fuzzy result function onclickusername (userinputforname) {//Results sync to the user all names (displayed with) $ ("#employeeFullnames"). Val ( Userinputforname.value);//The results are synchronized to the user id$ ("#SWorkercode"). Val (userinputforname.id);//results sync to user all name $ ("#SWorkername"). Val (Userinputforname.value);The results page hides $ ("#inputQueryUser"). Hide (); The background of the mouse after the result is gray-fuzzy search with function over (o) {o.style.backgroundcolor= ' #BBB ';} Mouse out the background is white-fuzzy search with function out (o) {o.style.backgroundcolor= ' #FFF ';} </script><!--<select name= "Addbotherpeopledict.sworkercode" ><c:foreach items= "${list4yg}" var= " YH "><option value=" ${yh.employeeguid} ">${yh.employeefullname}</option></c:foreach></ Select>-</td>

Backstage code:/** * Based on user input fuzzy query user * @return */public String queryuserbyinput () {//result set list<baseemployee> listforquerty= New arraylist<baseemployee> ();; Baseemployeeforquery.setsworkercode (null); try{//fuzzy Query listforquerty = Iemployeeservice.getallemployee ( Baseemployeeforquery, NULL, NULL, 5, 1,.). Getresultlist (); catch (Exception e) {logger.error ("Queryuserbyinput () Error:", e); E.printstacktrace ();} Development results are assembled into HTML code returned to the foreground page string result = new string ();//cyclic assembly htmlfor (int i = 0; i< listforquerty.size (); i++) {if (listf Orquerty.get (i). Getemployeedeptname () ==null | | Listforquerty.get (i). Getemployeedeptname (). Trim () = = "") {Listforquerty.get (i). Setemployeedeptname ("Unknown");} A user assembled as a button,button press the input box to the page to synchronize input (imitation baidu) result = result + "<input type= ' button ' style= ' Background-color:white; border:0;width:100% ' id= ' + listforquerty.get (i). Getemployeeguid () + "' value= '" +listforquerty.get (i). Getemployeefullname () + "-(" +listforquerty.get (i). Getemployeedeptname () + ") ' onclick= ' onclickusername (this) '/> &lT;br/> ";} Return the HTML code to Actioncontext.getcontext (). put (Json_result,result); return SUCCESS;}

Detail adjustment:
The background of the mouse after the result is gray-fuzzy search with function over (o) {o.style.backgroundcolor= ' #BBB ';} Mouse out the background is white-fuzzy search with function out (o) {o.style.backgroundcolor= ' #FFF ';}

Backstage code://A user assembled for a Button,button press to the page input box sync input (imitation baidu) result = result + "<input type= ' button ' style= ' Background-color: white;border:0;width:100% '  id= ' + listforquerty.get (i). Getemployeeguid () + "' value= '" +listforquerty.get (i). Getemployeefullname () + "-(" +listforquerty.get (i). Getemployeedeptname () + ") ' onclick= ' onclickusername (This) ' Onmouseover=over (this); Onmouseout=out (this); /><br/> ";


 
Focus on ui--useful techniques: Fuzzy search