1.html结构：
/*查询结果放ul里面*/
2.css样式：
#searchShop{
line-height:28px;
text-indent:5px;
width:180px;
float:left
height:28px;
border:none;
}
.searchShopBtn{
font-size:0;
padding-left:15px;
padding-right:15px;
background-color:#eff3f6;
background-repeat:no-repeat;
background-position:8px 5px;
}
.searchIcon{//小的搜索图标
}
/*查询结果对应的显示框css*/
.searchResult{
position:absolute;
top:47px;
right:70px;
width:180px;
border:1px solid#e4e7ee;
border-top:0;
border-bottom:0;
background:#fff;
max-height:279px;
overflow-y:auto;
overflow-x:hidden;
z-index:2;
}
/*列表都是li组成css*/
.searchResult li{
border-bottom:1px solid#e4e7ee;
line-height:30px;
padding-left:4px;
width:176px;
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 += '
' + v.name + '';
});
$('#searchResult').append(m);
}, error: function (res) {
}
})
}
4.这样就可以实现对应的模糊搜索，以下是输入一个s之后，返回的结果展示：
js实现模糊查询
1.简述 实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现. 后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询. 前端直接使用字符串的indexOf()方法或者正则表达 ...
编写简易的JS输入框模糊查询匹配(附有源码和demo)
前言:JS输入框模糊匹配插件以前在工作写过一个类似的 所以这次写轻松很多,这次写优化了几个方面: 1. 添加动态加载css文件 不需要引入css css全部在JS动态生成. 2. 不需要额外的标签 只 ...
js的模糊查询
在项目中会用到模糊查询,之前在首页是用的element的tree显示的目录,会有用到搜索,但tree里边会有自带的模糊查询,用filter-node-method方法使用 但上次的项目中 又涉及到不试 ...
模糊查询基于select遍历json文件自动填充的实现
HTML页面
案由 var xmldoc = new ActiveXObject("Microso ...
Unity 使用实体类
故事的由来: 正在开发打飞机的游戏,遇到这样的数据结构,游戏有很多关卡-> 每个关卡有几波怪物->每一波里面有怪物和数量 [] 关卡 { []波{ {怪物,数量},{怪物,数量},{怪物, ...
js常用DOM操作
在博客园看到了苏夏写的常用DOM整理文章,地址:/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...
正则匹配去掉字符串中的html标签
1.得到超链接中的链接地址: string matchString = @"]+href=\s*(?:'(?[^']+)'|"&quo ...
去除MyEclipse频繁弹出的Update Progress窗口
方法1: 1.关闭updating indexWindow => Preferences => Myeclipse Enterprise Workbench => Maven4My ...
freemarker处理map的数据(二十)
1.简易说明 (1)map取值 (2)key取值 2.实现示例
