先上效果图：
实现的步骤：
第一步：页面的准备，需要使用 mui 的search控件，以及自己准备一个供提示 DIV，这里我贴一下我的页面代码，主要是通过 onkeyup 事件来检查什么时候进行数据的提交，不过如果不对该事件加以控制会向后台发送没有意义的数据，加大服务器的压力，那么我这里的做法是先简单判断一下输入框中是否有内容，然后通过 last-data 来记录上一次搜索的数据：
<!--搜索-->
<div class="mui-input-row mui-search" style="margin: 11px 11px 1px 11px;"> <input type="search" class="mui-input-clear dealer-shop-input" placeholder="请输入经销商姓名或店铺" onkeyup="search_dealer_shop()" last-data="" onblur="search_dealer_lose()" onfocus="search_dealer_focus()"> </div> <div class="mui-row" style="margin: 1px 11px 10px 11px"> <div class="search-res" style="width: 100%; min-height: 80px; border-radius: 5px; box-shadow: 0 0 7px #827b7b; display: none"> <ul class="mui-table-view"> <div class="template-search-res"> <!-- 可在获取数据后酌情使用该模板 <li class="mui-table-view-cell"> <a href=""> 小猫子商铺 <span class="mui-badge mui-badge-inverted">商铺</span> </a> </li> --> </div> </ul> </div> </div>
第二步：就是想服务器发送请求，以及内容显示相关的逻辑，比如说发起了新的请求，之前请求到的内容就应该从模板中移除，代码如下：
<script>
// 搜索事件
function search_dealer_shop() {
var kw = $(‘.dealer-shop-input‘).val();
var last_data = $(‘.dealer-shop-input‘).attr(‘last-data‘);
if (kw != ‘‘ && last_data != kw) {
$(‘.dealer-shop-input‘).attr(‘last-data‘, kw);
$.post("{php echo $this->createMobileUrl($filename)}", {‘op‘: ‘search_dealer_shop‘, ‘kw‘: kw}, function (res) {
$(‘.add-template-search-res‘).remove();
var html = "<div class=‘add-template-search-res‘>";
if (res.code == 0) {
html += "<li class=\"mui-table-view-cell\">\n" +
" 暂无数据\n" +
" <span class=\"mui-badge mui-badge-inverted\">系统</span>\n" +
" </li>";
} else {
//
console.log(res);
for (var i = 0; i < res.data.length; ++ i) {
html += "<li class=\"mui-table-view-cell\">\n" +
" <a href=\""+ res.data[i].url +"\">\n" +
" "+ res.data[i].name +"\n" +
" <span class=\"mui-badge mui-badge-inverted\">"+ (res.data[i].type == 1 ? "经销商": "商铺") +"</span>\n" +
" </a>\n" +
" </li>";
}
}
html += "</div>";
$(‘.template-search-res‘).append(html);
$(‘.search-res‘).css(‘display‘, ‘block‘);
}, ‘json‘);
}
}
// 失去焦点事件
function search_dealer_lose() {
$(‘.search-res‘).css(‘display‘, ‘none‘);
}
// 获取焦点
function search_dealer_focus() {
var kw = $(‘.dealer-shop-input‘).val();
if (kw != ‘‘) {
$(‘.search-res‘).css(‘display‘, ‘block‘);
}
}
</script>
说明：$.post() 中的内容以及后端的代码小伙伴们可以根据自己的需求酌情设计
使用 mui jquery javascript 实现智能提示功能
原文：https://www.cnblogs.com/GetcharZp/p/12197775.html