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 {//小的搜索图标
}
/*查询结果对应的显示框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之后,返回的结果展示:
 
 
 
 
 
 
 

最新文章

  1. Twisted随笔
  2. 最后一次PSP
  3. bash快捷建
  4. SPOJ SUBST1 后缀数组
  5. Linux挂载磁盘
  6. WordPress 主题开发 - (十三) Archive模板 待翻译
  7. 用 Xcode 开发 Cydia Substrate 插件(二)
  8. Builder
  9. 忘记linux root密码怎么办?
  10. 应用程序出现挂死,.NET Runtime at IP 791F7E06 (79140000) with exit code 80131506.
  11. iis 回收工作进程时出错的解决办法
  12. 【Chromium中文文档】Chromium多进程架构
  13. F - 蜘蛛牌(深度搜索)
  14. Android之使用JAVA占位符格式数据(很实用)
  15. docker managed volume - 每天5分钟玩转 Docker 容器技术(40)
  16. MYSQL解压版安装说明
  17. [编织消息框架][netty源码分析]12 ByteBuf 实现类UnpooledDirectByteBuf职责与实现
  18. Django组件 之中间件
  19. JS 数组去重的几种方式
  20. caffe实现年龄及性别预测

热门文章

  1. VIM中使用tab键自动完成(vim tab键自动补全 )插件supertab
  2. linux撤销命令
  3. linux复制和移动
  4. Java一致性的实现
  5. React之组件小析
  6. 2017 google IO大会——5.17
  7. 基于node.js及express实现中间件,实现post、get
  8. 2018.2.27 RF module distance test part I
  9. string类封装
  10. Gym - 101673:B Craters (几何,求凸包)