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 {//小的搜索图标

1. background-image: url();

}

/*查询结果对应的显示框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 += '
' + v.name + '
';             });             $('#searchResult').append(m);         }, error: function (res) {
             }     }) } 4.这样就可以实现对应的模糊搜索，以下是输入一个s之后，返回的结果展示：