0

我正在使用带有 ASP.NET 文本框的 JQuery UI 自动完成来填充标签和值。这是我从 ajax 调用映射数据的地方：

success: function (data) {
    response($.map(data, function (item) {
        return {
            label: item.label,
            value: item.value
        }
    }));
}

标签是文本，值是用于标识该行的数字。我的问题是当用户选择一个选项时，文本框会用值替换标签。因此，如果他们选择“John Smith”，则文本框会从“John Smith”变为“1234”等。如何操纵选择事件以将文本留在文本框中？任何帮助表示赞赏。谢谢！

这是我的 aspx 页面的更完整视图：

    <div class="ui-widget">
        <asp:TextBox ID="txbSearchKeyword" runat="server" Columns="50" />
    </div>
    <asp:HiddenField ID="selectedRecordId" runat="server" />

和jQuery：

(function () {
    $("#txbSearchKeyword").autocomplete
    ({
        source:
            function (request, response) {
                $.ajax({
                    type: "POST",
                    url: "AutoComplete.asmx/GetAutoCompleteList",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ keywordStartsWith: request.term }),
                    dataType: "json",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.label,
                                value: item.value
                            }
                        }));
                    }
                });
            },
        minLength: 2
    });

    $("#txbSearchKeyword").autocomplete
    ({
        select: function (event, ui) {
            $('#selectedRecordId').val(ui.item.value);
            DoSomethingwithdataAJAXfunction(ui.item.value);
        }
    });
})();
4

3 回答 3

2

也许这个片段中的一些会帮助你：

select: function(event, ui) {
    var hasValue = (ui.item.value != undefined && ui.item.value != "" && ui.item.value != null);
    if (hasValue) {
        var focusedElement = $(this);
        focusedElement.val(ui.item.label);
        return false;
    }
    else {
        return false;
    }
},
focus: function(event, ui) {
    return false; // return "true" will put the value (label) from the selection in the field used to type
},

顺便说一句，我不知道你为什么在以下情况下将事情分开：

minLength: 2
 });
  $("#txbSearchKeyword").autocomplete
 ({ 
    select:...

可能只是：

minLength: 2,
select:...
于 2012-04-19T16:55:14.630 回答
0

value是将在文本字段中显示的变量。

所以你需要改变它。label: item.value, value: item.label:)

于 2012-04-19T16:08:42.183 回答
0

我假设您希望选择的项目出现在

ID="txbSearchKeyword"

这个文本框？

尝试将此添加到您的自动完成中：

({
    select: function (event, ui) {

     //add this -->  $('#txbSearchKeyword').val(ui.item.label);
       $('#selectedRecordId').val(ui.item.value);
        DoSomethingwithdataAJAXfunction(ui.item.value);
    }
});

您可以尝试添加的行在评论中。我今天遇到了同样的问题，它对我有用。

于 2012-04-19T18:28:51.227 回答