jQuery自动完成标签，选择时不同字段中的值

Question

我正在使用 jQuery 自动完成 (http://jqueryui.com/demos/autocomplete/) 并让它工作，但是当用户选择一个项目时，它会将值放在文本框中。我希望这样当用户选择一个项目时，标签被用作文本框中的文本，并且该值被插入到隐藏字段“cId”中。

我环顾四周，似乎找到了解决办法。

我的值在一个名为 ClientCsv 的字符串中，例如：

[ { label: "ClientId1", value: "ClientName1" }, { label: "ClientId2", value: "ClientName2" } ]

我目前使用的jquery是：

$(function () {
var availableTags = [ " & ClientCsv() & " ]; $('#tags').autocomplete({ source: availableTags});
});

表格代码：

<asp:TextBox ID="tags" runat="server"></asp:TextBox>
<asp:HiddenField ID="cId" runat="server" />

感谢您的帮助。

Answer 1

您需要为自动完成连接 select 事件，然后阻止在搜索字段中填充值的默认操作。

var availableTags = [{ label: "ClientId1", value: "ClientName1" }, { label: "ClientId2", value: "ClientName2"}];

$(function () {
    var txt = $('#tags');
    txt.autocomplete({ 
        source: availableTags,
        select: function(event, ui){
            //put the label in your text field
            txt.val(ui.item.label);

            //put the value in your hidden field
            $('#cId').val(ui.item.value);

            //cancel the event to prevent it populating the value
            event.preventDefault();
        }
    });
});