使用 mui jquery javascript 实现智能提示功能

先上效果图：

 

 

 实现的步骤：

第一步：页面的准备，需要使用 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() 中的内容以及后端的代码小伙伴们可以根据自己的需求酌情设计