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

【问题标题】：Cannot Select From JQuery Autocomplete Selection Options无法从 JQuery 自动完成选择选项中选择
【发布时间】：2012-02-09 00:15:11
【问题描述】：

我正在处理这个 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
        });

【问题讨论】：

标签： jquery asp.net jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

不要使用ui.item，而是在您的select 处理程序中使用ui.item.label。 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
        });

【讨论】：

太棒了！这就是问题所在， select: 函数在错误的位置。一旦我移动它，它就可以正常工作。非常感谢您的快速回复。
很棒的帖子，这帮助我赶上了截止日期！谢谢！
@sacredfaith：没问题！很高兴我能帮上忙。

【解决方案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)

【讨论】：