首页 > 代码库 > 研究模糊搜索

研究模糊搜索

   最近常听见旁边的大牛们说什么模糊搜索,自己想了想  有点尴尬   全忘了 今天看看复习了一下,话不多说  直接上代码。

1.html结构:

  <label for="searchShop" class="clear pos-a" style="top:17px;">
            <input type="text" id="searchShop" placeholder="场所搜索">
            <input type="button" value="http://www.mamicode.com/搜索" 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.  #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之后,返回的结果展示:

技术分享
 

研究模糊搜索