js input搜索框自动补全及模糊搜索

一.搜索的html

注意:自动补全和模糊搜索用的是jquery-ui组件，使用时需引入jquery-ui的js和css

<div class="top_search" data-open="no">
            <input type="text" id="search_con">
        </div>

二、搜索值和模糊匹配

    //搜索
    $("#search_con").on("focus", function () {//获得焦点清空值
        $("#search_con").val("")
        $(".ui-helper-hidden-accessible").hide()
        //模糊匹配控件跟时间控件冲突,会导致每次选择时间后无法执行选中搜索功能,所以使用及时加载的方式
        try {
            $("#search_con").autocomplete("destroy")
        } catch (e) {
            console.info(e)//第一次销毁肯定会报错,属于正常现象
        }
        $("#search_con").autocomplete({//模糊匹配
            autoFocus: true,
            messages: {
                noResults: $.i18n.prop("no_pipei"),
                results: function () {
                    return ""
                }
            },
            response: function () {
                $(".ui-helper-hidden-accessible").show()
            },
            source: allProvinceName,
            select: function (params1, params2) {//选中搜索
                provinceSearch(params2.item.value)
                $(".ui-helper-hidden-accessible").hide()
            }
        })
        $(".ui-helper-hidden-accessible").hide()
    })
    $("#search_con").on("input", function () {
        $(".ui-helper-hidden-accessible").hide()
    })
    $("#search_con").on("blur", function () {//空值恢复
        if ($("#search_con").val() == "") {
            $("#search_con").val($.i18n.prop("please_enter_province"))
        }
        $(".ui-helper-hidden-accessible").hide()
    })
    $("#search_con").bind('keypress', function (event) {//回车搜索
        if (event.keyCode == 13)
            provinceSearch($("#search_con").val())
    })
    $(".search_btn").on("click", function () {//点击搜索
        provinceSearch($("#search_con").val())
    })