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

標籤：.com   pos   base64   scrollto   參數   boa   base   append   param   

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之後，返回的結果展示：

      

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