前端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之后，返回的结果展示：