Question

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

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

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

以下是我的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);
        }
    });
})();

Answer 1

这段代码可能会对您有所帮助：

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:...

Answer 2

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

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

Answer 3

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

中

ID="txbSearchKeyword"

这个文本框？

尝试将此添加到您的自动填充功能中：

({
    select: function (event, ui) {

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

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

JQuery UI Autocomplete在select上用Value替换Label

3 个答案: