In the current project, we need to perform fuzzy search and quickly complete the first version based on previous technologies. Let's take a look at the results of the first version. Let's make a comment later:
Elementary:
We may have some source code (all source code will be included in the attachment)
<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> <TD> Li Si </TD> <TD> female </TD> </tr> <TD> Wang Wu </TD> <TD> male </TD> </tr> <TD> </TD> <TD> male </TD> </tr> <TD> rain </TD> <TD> male </TD> </tr> <TD> maxman </TD> <TD> female </TD> </tr> <TD> Wang liu</TD> <TD> male </TD> </tr> <tr> <TD> Li Zi </TD> <TD> female </TD> </tr> <TD> Li Si </TD> <TD> male </TD> </tr> </tbody> </table> <br/> </div> </span>
We can clearly see that we have leaked data and leaked the data to users on the interface. This is very dangerous. After the familiar Ajax technical transformation, we immediately launched the second version:
However, the test raises two bugs: 1. The selected item is not marked; 2. The input Chinese characters do not respond.
Details:We have added the following code:
To solve the problem of Chinese characters, we changed the trigger event from onkeypress () to onpropertychange ()
Difference: onpropertychange is used to detect attribute changes. At this time, the change of Chinese characters is the change of attribute values, which solves the defect that onkeypress only recognizes English and numbers.
Summary:
Through our self-check and responsible testing, we changed a small function on the UI and fuzzy search n times. This is exactly in line with the idea of "user first". We should deepen our philosophy, for the user, the interface is all. In terms of UI optimization, we should spare no effort to think for the user and do it for the user! As one of my colleagues said when I first joined the company, users will be angry if they think more and do more!
Attachment (source code): elementary:
<! 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:
<TD align = center class = "module_title_text" style = "text-align: Right; padding-right: 8px "> employee name </TD> <input type =" text "id =" employeefullnames "name =" baseemployeeforquery. employeefullname "size =" 42 "class =" module_input_01 "id =" "maxlength =" 20 "value =" "onkeypress =" inputworkercode (this) "/> <SCRIPT charset =" UTF-8 "type =" text/JavaScript "> // fuzzy query User Function inputworkercode (userinput) {// obtain 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 {// Add the HTML code returned by the background to the result display Div $ ("# inputqueryuser" ).html (resobj); $ ("# inputqueryuser "). show () ;}}) ;}}// the user selects a fuzzy result function onclickusername (userinputforname) {// The result is synchronized to all user names (Display Use) $ ("# employeefullnames "). val (userinputforname. value); // The result is synchronized to the user ID $ ("# sworkercode "). val (userinputforname. ID); // synchronize the result to all user names $ ("# sworkername "). val (userinputforname. value); // hide the result page $ ("# inputqueryuser "). hide ();} // the background of the result after the mouse goes through is gray -- function over (o) {o. style. backgroundcolor = '# BBB';} // draw the result background in white with the mouse -- function out (o) {o for fuzzy search. style. backgroundcolor = '# fff' ;}</SCRIPT> <! -- <Select name = "addbotherw.ledict. sworkercode "> <C: foreach items =" $ {list4yg} "Var =" YH "> <option value =" $ {YH. employeeguid} ">$ {YH. employeefullname }</option> </C: foreach> </SELECT> --> </TD>
// Background code:/*** fuzzy query user based on user input * @ 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, 50 ). getresultlist ();} catch (exception e) {logger. error ("queryuserbyinput () error:", e); E. printstacktrace () ;}// the result is assembled into HTML code and returned to the front-end page string result = new string (); // The htmlfor (INT I = 0; I <listforquerty. size (); I ++) {If (listforquerty. get (I ). getemployeedeptname () = NULL | listforquerty. get (I ). getemployeedeptname (). trim () = "") {listforquerty. get (I ). setemployeedeptname ("unknown");} // a user is assembled into a button, and the button is pushed to the page input box for Synchronous input (similar to 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) '/> <br/>" ;}// return the HTML code to actioncontext. getcontext (). put (json_result, result); Return success ;}Details:
// The background of the result after the mouse goes through is gray-function over (o) {o. style. backgroundcolor = '# BBB';} // draw the result background in white with the mouse -- function out (o) {o for fuzzy search. style. backgroundcolor = '# fff ';}
// Background code: // a user is assembled into a button, and the button is pressed to the page input box for Synchronous input (similar to 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-Practical Technology: Fuzzy search
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
