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

Question

发生了什么，但我的自动建议没有显示，但是当发生 ajax 调用时，我使用 JSONP 在我的控制台 im 中看到数据，因为这是跨域的。任何建议会有帮助。

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”以获取示例。