前端js模糊搜索（模糊查詢）

1.html結構：

  <label for="searchShop" class="clear pos-a" style="top:17px;">
            <input type="text" id="searchShop" placeholder="場所搜索">
            <input type="button" value="搜索" class="searchIcon searchShopBtn">
  </label>

/*查詢結果放ul里面*/

<ul id="searchResult" class="searchResult">

 

</ul>

 

2.css樣式：

#searchShop {

1. line-height: 28px;
2. text-indent: 5px;
3. width: 180px;
4. float:left
5. height: 28px;
6. border: none;

}

 

.searchShopBtn{

1.  font-size: 0;
2.  padding-left: 15px;
3.  padding-right: 15px;
4.  background-color: #eff3f6;
5.  background-repeat: no-repeat;
6.  background-position: 8px 5px;

}

 .searchIcon {//小的搜索圖標

1. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFW…07gDgaiP9C+Y2UpKM1QJwIxB+hwQAGjNQqj5gYqAQAAgwAkpg6e/xOfYMAAAAASUVORK5CYII=);

}

/*查詢結果對應的顯示框css*/

 .searchResult {

1. position: absolute;
2.  top: 47px;
3.  right: 70px;
4.  width: 180px;
5.  border: 1px solid #e4e7ee;
6.  border-top: 0;
7. border-bottom: 0;
8. background: #fff;
9.  max-height: 279px;
10.  overflow-y: auto;
11.  overflow-x: hidden;
12.  z-index: 2;

}

 

/*列表都是li組成css*/

.searchResult li {

1.  border-bottom: 1px solid #e4e7ee;
2.  line-height: 30px;
3.  padding-left: 4px;
4.  width: 176px;
5. list-style:none;

}

 

 

 

 

/*以上是樣式，不合適請自行調整*/

 

靜態效果是這樣的：

 

假如輸入個c：那么結果是這樣的

 

這個有搜索結果的對應的結構是這樣的：里面的li是動態添加進去的，只需要把這個ul寫好放着就行。

 

 

 

 

 

3.搜索功能實現的相關js,     依賴jquery.js

var isHasnextPage = false;//是否有下一頁數據
var searchItem = '';//搜索框內容
var pageNum = 1;//默認page

//監聽搜索框輸入事件，有內容的話就進行查詢
$('#searchShop').on('input', function () {
    var _v = $.trim($(this).val());
    $('#searchResult').empty();
    pageNum = 1;
    isHasnextPage = false;
    if (_v != '') {
        searchItem = _v;
        searchShopFn(_v, pageNum);
    }
});

/**
 * 搜索結果的下拉加載更多，每頁顯示十條，如果搜索結果多余十條，下拉對應的列表，會自動把其他數據添加進來
 * @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)
 }
}

//滾動到底部加載數據
$('#searchResult').scroll(function () {
 if ($(this).height() + $(this).scrollTop() >= $(this)[0].scrollHeight) {
 nextLoad(searchItem, isHasnextPage);
 }
});

//點擊每條數據給搜索框賦值，同時需要重新設置對應的參數
$(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;

});

//模糊查詢ajax請求數據  keyWord就是關鍵詞，pageNum是對應的頁碼
function searchShopFn(keyWord, pageNum) {
    $.ajax({
        url: $web_url + "xxxxr",//請求數據的地址，
        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 * 10 < 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.這樣就可以實現對應的模糊搜索，以下是輸入一個s之后，返回的結果展示：