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