JavaScript code sharing for front-end real-time search (figure)

This article describes in detail how to implement real-time browser search using JavaScript, which has some reference value, if you are interested, please refer to this article for details on how to implement the Real-Time browser search function in JavaScript, which has some reference value. If you are interested, please refer

Most pages have the search function. As a front-end, we only want to return user input to the background and then present feedback data to the user. The specific implementation is as follows:

1. Basic layout:

  
        
  
Cancel

Here is a question about how to put the search icon in the input. I will not repeat the relevant information on the Internet:

  .searcher {   background: rgba(255, 255, 255, 0);   position: fixed;   z-index: 999;   width: 100%;   height: 6rem;   text-align: center;   font-size: 1.6rem;  }  .searcher-main {   background: #F4F4F4;   position: absolute;   left: 50%;   top: 1.2rem;   margin-left: -45%;   border-radius: 1.6rem;   width: 80%;   height: 3rem;   line-height: 3rem;  }      .searcher-text {   width: 80%;   text-align: center;   border: none;   outline: none;   background: #F4F4F4;  }  .searcher-cancel {   position: absolute;   width: 10%;   height: 3rem;   line-height: 3rem;   color: #929292;   top: 1.2rem;   right: 1rem;  }

2. step-1:

// Listen to the input box and render $ ('. searcher-text') in real time. on ('input', function () {initSearchList ();});

JQ generally uses this + = html method. Although it is cumbersome, it is easier to pass parameters through attributes in URLs or tag tags.

// Render the search List function initSearchList () {var List = $ ('. searcher-land ul '); var params ={}; // search for the filter character var SEARCH_KEY =$ ('. searcher-text '). val () params ['action'] = 'get _ search_key_list '; params ['market _ iid'] = 1001; params ['search _ type'] = type; params ['search _ key'] = replaceIllegalStr (SEARCH_KEY); epm. ajax (params, function (result) {console. log (result); console. log (TYPE) var html = ''; List.html (''); // If (result. data. length> 0) {$. each (result. data, function (index, value) {goodName = value ['goods _ name']; shopName = value ['shop _ name']; // determine the Name type itemName = (goodName )? GoodName: shopName; html + ='
'+ ItemName +'
'}); Parameters ('.searcher-list'{.html (html);} // No result else {html ='
This option cannot be found now ~
'; Parameters ('.searcher-list'{.html (html );}});}

Note that there is a replaceIllegalStr () method, similar to regular expressions, to filter out useless symbols to avoid unnecessary trouble for the backend to receive data.

function replaceIllegalStr(str) { var reg; var illegal_list = ["/", "\\",  "[", "]",  "{", "}",  "<", ">",  "＜", "＞",  "「", "」",  "：", "；",  "、", "•",  "^", "'", "\"",  "\r", "\r\n", "\\n", "\n"]; for (var i = 0; i < illegal_list.length; i++) {  if (str.indexOf(illegal_list[i]) >= 0) {   if (illegal_list[i] == '\\' || illegal_list[i] == '[') {    reg = new RegExp('\\' + illegal_list[i], "g");   } else {    reg = new RegExp(illegal_list[i], "g");   }   str = str.replace(reg, '');  } } return str.trim();}

4. step-2:

// Set the cache. setLocalItem = function (key, value) {if (window. localStorage) {localStorage. setItem (key, value);} else {// backup scheme setCookie (key, value );}};

// Extract the cache. getLocalItem = function (key) {if (window. localStorage) {return localStorage. getItem (key) ;}else {// backup scheme return getCookie (key );}};

// Delete the cache. removeLocalItem = function (key) {if (window. localStorage) {localStorage. removeItem (key) ;}else {// backup scheme removeCookie (key );}};

The above is the details of the code sharing (diagram) for JavaScript to implement the real-time search function on the front end. For more information, see other related articles in the first PHP community!