Question

我正在处理这个jQuery自动完成的事情，我点击后无法从结果集中选择项目出现在文本框中。

如您所见，代码返回和项目，我看到下拉列表。（我发布了一张照片，但我很新，不能= /）但是在我点击之后，没有任何反应：（Joe Blow离开，没有显示，但结果只是现场的99）

这是我的代码：

var techNumber = $('#<%= txtTechNumber.ClientID %>');
        techNumber.autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '<%=ResolveUrl("~/Service/ServiceHelpdesk/") %>srvWebServiceRepository.asmx/FetchTechnicianList',
                    data: "{ 'techNumber':'" + request.term + "' }",
                    dataType: "json",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        if (data.d != null) {
                            response($.map(data.d, function(item) {
                                return {
                                    label: highlight(item.TechNumber, request.term) + " - " + item.TechFirstName + " " + item.TechLastName,
                                    value: item.TechID
                                }
                            }))
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    },
                    select: function(event, ui) {
                        techNumber.val(ui.item);
                    }
                });
            },
            minLength: 1
        });

Answer 1

不使用ui.item，而是在ui.item.label处理程序中使用select。它也可能不会对preventDefault事件造成伤害。最后，确保select处理程序的定义位于传递给窗口小部件的选项对象中（以前它位于AJAX选项对象中）：

var techNumber = $('#<%= txtTechNumber.ClientID %>');
        techNumber.autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '<%=ResolveUrl("~/Service/ServiceHelpdesk/") %>srvWebServiceRepository.asmx/FetchTechnicianList',
                    data: "{ 'techNumber':'" + request.term + "' }",
                    dataType: "json",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        if (data.d != null) {
                            response($.map(data.d, function(item) {
                                return {
                                    label: highlight(item.TechNumber, request.term) + " - " + item.TechFirstName + " " + item.TechLastName,
                                    value: item.TechID
                                }
                            }))
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            },
            select: function(event, ui) {
                event.preventDefault();
                techNumber.val(ui.item.label);
            }            
            minLength: 1
        });

Answer 2

这是一个通用修复。

在调用.autocomplete

之前，在函数顶部添加它

(function ($) {

    $(".ui-autocomplete-input").live("autocompleteopen", function () {
        var autocomplete = $(this).data("autocomplete"),
        menu = autocomplete.menu;

        if (!autocomplete.options.selectFirst) {
            return;
        }

        menu.activate($.Event({ type: "mouseenter" }), menu.element.children().first());
    });

} (jQuery));

然后在函数内部添加一个参数selectFirst: true，如：

$('#ctl00_PageBody_txtKeywords').autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'POST',
                url: 'getData.asmx/LoadData',
                selectFirst: true,

（P.S。找不到原始参考文献，必须指向它http://bit.ly/INzcrv）

无法从JQuery自动完成选择选项中选择

2 个答案: