文本框的jquery自动完成:不同的值和文本

时间:2013-08-06 20:09:24

标签: jquery asp.net-mvc

所以,这个问题出现了几次,通常是'输入',大多数是在MVC3中。我希望事情发生了变化。我正在使用jquery和autocomplete,并希望保存'value'而不是'label'。但是,用户需要查看有意义的标签,而不是用户不关心的主键中的随机数。

也许是因为我开始使用webforms,但我很惊讶MVC控件似乎完全失去了将值与文本分离的概念。惊讶到足以认为问题可能是我遗漏了什么,

那么如何在不需要隐藏字段和模型属性的情况下保存值并在此文本框中显示所选项目的标签?在这种情况下,ContactName是要保存的重要值。

剃刀

     @Html.TextBoxFor(x => x.Issue.ContactNameDisplay, new { style = "width: 100%", id = "ContactNameDisplay" })
@Html.HiddenFor(x => x.Issue.ContactName, new {id = "ContactName"})

自动填充

$('#ContactNameDisplay').autocomplete(
       {
           dataType: 'json',
           source: function (request, response) {
               $.get('@Url.Action("LoadAdFullNames", "Order")', { phrase: request.term }, function (data) {
                   response($.map(data, function (item) {
                       return {
                           label: item.Text,
                           value: item.Value,
                       };
                   }));
               });
           },
           select: function (event, ui) {
               event.preventDefault();
               $('#ContactName').val(ui.item.val);
               $(this).val(ui.item.val);
              $(this).text(ui.item.label);       //Breaks Here
               $.get('@Url.Action("LoadPhoneNumber", "Order")', { windowsId: ui.item.value }, function (data) {
                   $('#ContactPhone').val(data.toString());
               });

           },
           focus: function (event, ui) {
               event.preventDefault();
               $(this).text(ui.item.label);
           },
       });

1 个答案:

答案 0 :(得分:0)

输入元素没有文字属性。

$(this).val(ui.item.label);  // Show the value in the textbox

将信息存储在 HTML-5数据 - *属性

    $(this).data('key', ui.item.val); 

要检索密钥,您只需使用

即可
$(this).data('key')