Question

发生了什么但是我的自动建议没有显示但是当ajax调用发生时我在控制台 im 中使用 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中搜索自动完成插件使用的类来查找。

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

2 个答案: