Focus on UI-Practical Technology: Fuzzy search and ui fuzzy search

Focus on UI-Practical Technology: Fuzzy search and ui fuzzy search

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>

 

Simple upgrade:

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"> 
 
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/> ";

 

 
 
 

In ASPNET, how can I use layer-3 knowledge to implement fuzzy query and write code at DAO and UI layers?
Are you talking about the DAL layer ??
Public DataSet SearchInfo (string query condition)
{
String SQL = "select * from [YourTable] where [condition] like '%" + query condition + "% '";
......
......
}
The UI Layer can only call classes in the business logic layer BLL. BLL transmits the DAL method and calls it at the UI Layer.
The DataSource attribute of a container is equal to SearchInfo (query condition) and displayed on the page.

How can I deal with small icons in uidesign?
Use PS to create a transparent layer, copy the icon you want to the transparent layer, merge and export it as PNG format, use PNG to convert ICO format software, and convert PNG to ICO;

OK