Front-end JS fuzzy search (fuzzy query)

1.html structure:

<label for= "Searchshop" class= "clear Pos-a" style= "TOP:17PX;" >
<input type= "text" id= "Searchshop" placeholder= "Site Search" >
<input type= "button" value= "Search" class= "Searchicon searchshopbtn" >
</label>

/* Query results put UL inside * *

<ul id= "SearchResult" class= "SearchResult" >

</ul>

2.CSS Style:

#searchShop {

2. Line-height: 28px;
4. Text-indent: 5px;
6. Width: 180px;
8. Float:left
10. Height: 28px;
12. border: none;

}. searchshopbtn{

2. Font-size: 0;
4. padding-left: 15px;
6. padding-right: 15px;
8. background-color: #eff3f6;
10. background-repeat: no-repeat;
12. background-position: 8px 5px;

}. Searchicon {//Small search icon

1. Background-image: url (data:image/png;base64,ivborw0kggoaaaansuheugaaabiaaaascayaaabwzo5xaaaagxrfw ... 07gdgaip9c+y2upkm1qjwixb+hwqagjnqqj5gyqaqaagwakpg6e/xofymaaaaasuvork5cyii=);

}/ * display box CSS for query results* /. SearchResult {

2. Position: absolute;
4. Top: 47px;
6. Right : 70px;
8. width: 180px;
10. border: 1px solid #e4e7ee;
12. border-top: 0;
14. Border-bottom: 0;
16. Background: #fff;
18. max-height: 279px;
20. overflow-y: auto;
22. overflow-x: hidden;
24. z-index: 2;

}/ * list is all Li composition css*/. SearchResult Li {

2. border-bottom: 1px solid #e4e7ee;
4. line-height: 30px;
6. padding-left: 4px;
8. width: 176px;
10. List-style:none;

}/ * Above is style, not suitable please adjust * /The static effect is this:If you enter a C: Then the result is this.The corresponding structure of the search results is this: the inside of the Li is added dynamically, just need to put this UL write well put on the line.   3. Search function implementation of the relevant JS, dependent on Jquery.js

var ishasnextpage = false;//Whether there is a next page of data
var searchitem = ";//Search box Contents
var pagenum = 1;//Default page

Listen to the search box input event, the content of the words to query
$ (' #searchShop '). On (' Input ', function () {
    var _v = $.trim ($ (this). Val ());
    $ (' #searchResult '). empty ();
    Pagenum = 1;
    Ishasnextpage = false;
    if (_v! = ") {
        Searchitem = _v;
        SEARCHSHOPFN (_v, pagenum);
    }
});

/**
 * search results drop-down load more, each page shows 10, if the search results more than 10, dropdown corresponding list, will automatically add additional data in 
  *  @method nextload () 
  *  @param {nextload:false or Ture,keyword:keyword,nextload:true or False} 
  *  @return {data} 
  */
  
 function Nextload (KeyWord, Ishasnextpage) {
 if (!! Ishasnextpage) {
 Searchshopfn (keyWord, pagenum + = 1) 
} 
} 
 
//Scroll to the bottom to load data 
 $ (' #searchResult '). Scroll ( function () {
 if ($ (this). "Height () + $ (this). ScrollTop () >= $ (this) [0].scrollheight] {
 Nextload (Searchitem, is Hasnextpage); 
} 
})            

Click each piece of data to assign a value to the search box, and you need to reset the corresponding parameters
$ (document). On (' click ', '. SearchResult li ', function () {
    var _v = $ (this). text ();
    var _shopid = $ (this). attr (' shopid ');
    $ (' #searchShop '). Val (_v). attr (' Shopid ', _shopid);
    $ (' #searchResult '). Hide ();
    Ishasnextpage = false;
    return false;

});

Fuzzy query Ajax Request data keyword is the keyword, pagenum is the corresponding page number
function Searchshopfn (KeyWord, pagenum) {
$.ajax ({
URL: $web _url + "XXXXR",//address of the request data,
DataType: "JSON",
Data: {
Keyword:keyword,
Brandid: ",
Province: ",
City: ",
Area: ",
Page:pagenum | | 1,
Size:10
},
Success:function (res) {
var liary = res.data.list;
var liarytotal = res.data.total;
Ishasnextpage = (Pagenum * < liarytotal)? True:false;
var m = ';
$.each (liary, function (i, v) {
M + = ' <li shopid= "' + v.id + '" title= "' + v.name + '" > ' + v.name + ' </li> ';
});
$ (' #searchResult '). Append (m);

}, Error:function (res) {

}

})
}


4. In this way, the corresponding fuzzy search can be implemented, following the input of an S, the results of the return show:

Front-end JS fuzzy search (fuzzy query)