jQuery UI自动完成未显示，但显示在浏览器控制台上

Question

发生了什么，但是没有显示我的自动建议，但是当ajax调用发生时，由于这是跨域的，因此我在控制台即时消息中使用JSONP看到了数据。

HTML：

<form action="search.asp" id="searchform">
            <p class="search">
            <input class="queryAutocomplete"  id="query" type="textbox" name="query" style="margin-left:-180px;width:105% !important;" value=""/>
            <INPUT type="hidden" name="pr" value="test">
            <input type="submit" class="searchbutton" value="Search"/>
            </form>

脚本：

<script>
  $(function() {
// add autocomplete
$("#query.queryAutocomplete").autocomplete({
    source: function(request, response) {

        $.ajax({
            crossDomain:true, 
            type: "GET",
            dataType: "jsonp",
            url: "http://url.com/search/autocomplete.json",
            data: {
                pr: $("input[name='pr']").val(),
                term: request.term
            },
            success: function(data) {
                response(data[1]);
            }
        });
    },
    minLength: 2,
    open: function(e, ui) {

        var term = $("#query").val();
        var acData = $(this).data("uiAutocomplete");
        acData.menu.element.find("a").each(function() {
            var a = $(this);
            var completion = a.text();
            var pos = completion.indexOf(term);
            var txt = "";
            if(pos != 0) {
                txt += "<span class='ui-autocomplete-completion'>"
                    + completion.substr(0, pos) + "</span>"
            }
            txt += "<span class='ui-autocomplete-term'>" + term + "</span>";
            if(pos + term.length < completion.length) {
                txt += "<span class='ui-autocomplete-completion'>"
                    + completion.substr(pos + term.length) + "</span>";
            }
            a.html(txt);
        });
    },
    select: function(event, ui) {
        $("#query").val(ui.item.value)
            .closest("form").submit();
    },
});
});
</script>

Answer 1

没有现场示例（例如在jsfiddle上），很难发现出了什么问题，但是看起来您正在使用open事件来修改选项的可选列表以将其格式化为您的要求。

相反，您应该覆盖自动完成功能的_renderItem函数-尝试搜索“ .data（“ uiAutocomplete”）._ renderItem“以获取示例。

Answer 2

可能是自动完成的z-index小于包含文本框的div的z-index。 因此它是不可见的。

您可以通过使用开发人员工具在DOM中搜索自动完成插件使用的类来查找。