JQuery UI autocomplete自动补全插件搜索结果去除提示

JQuery UI autocomplete自动补全插件搜索结果去除提示

背景

最近有个后台管理系统要用到自动检索并补全信息的功能，所以我就用到JQuery UI的autocomplete插件，插件挺好用的，api也讲解也挺全的，学习成本低，如果大家有自动补全功能的需求可以去看看。在功能基本完成之后我发现这个自动补全搜索出来的结果总是在结果的最上面出现一行英文的提示，大致意思是告知用户搜索的结果符合要求的有多少条，虽然是一片好心但是导致样式一点都不好看，如下图：

 

解决方案：

• jqueryui中搜索menufocus,把这个绑定注掉如下: /*menufocus:function(e,i){var s,n;return this.isNewMenu&&(this.isNewMenu=!1,e.originalEvent&&/^mouse/.test(e.originalEvent.type))?(this.menu.blur(),this.document.one(“mousemove”,function(){t(e.target).trigger(e.originalEvent)}),void 0):(n=i.item.data(“ui-autocomplete-item”),!1!==this._trigger(“focus”,e,{item:n})&&e.originalEvent&&/^key/.test(e.originalEvent.type)&&this._value(n.value),s=i.item.attr(“aria-label”)||n.value,s&&t.trim(s).length&&(this.liveRegion.children().hide(),t(“<div>”).text(s).appendTo(this.liveRegion)),void 0)},*/
• 代码末尾message

 

$('#company').autocomplete({
    source: function (query, process) {
        var cityVal = $('#city').val();
        if (cityVal > 0) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: '${pageContext.request.contextPath}/companyGrade/getCompanyInfo',
                data: {
                    'cityId': cityVal,
                    'searchParam': $('#company').val()
                },
                success: function (data) {
                    if (data.code == 1) {
                        process($.map(data.data, function (item) {
                            return {
                                label: item.companyName,
                                value: item.companyName,
                                companyId: item.companyId
                            }
                        }));
                    } else {
                        return;
                    }
                },
                error: function () {
                    alert('网络异常 请稍后再试');
                }
            });
        } else {
            alert("请先选择城市");
            return;
        }
    },

    select: function (event, ui) {
        $('#comId').val(ui.item.companyId);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '${pageContext.request.contextPath}/companyGrade/getCompanyGrade',
            data: {
                'companyId': ui.item.companyId
            },
            success: function (data) {
                $('#comId').val(ui.item.companyId);
                if (data.code == 1) {
                    $('#infoPercent').val(data.data.companyInfoPercent);
                } else {
                    $('#infoPercent').val('');
                }
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {
                alert('网络异常 请稍后再试');
            }
        });
    },
    messages: {
        noResults: '',
        results: function () {}
    }
});