jquery自動完成文本框：不同的值和文本

所以，這個問題已經出現了幾次，通常與'輸入的和大多數在MVC3。我希望事情已經改變。我正在使用jquery和自動完成，並且想要保存'value'而不是'label'。但是，用戶需要看到有意義的標籤，而不是用戶不關心的主鍵中的隨機數。jquery自動完成文本框：不同的值和文本

也許是因爲我開始使用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); 
      }, 
     });

來源

2013-08-06 Seth

要記住的一件重要事情的關鍵何時到來從Web窗體到MVC是在MVC中沒有控件，有助手。助手只是簡單的HTML呈現方式。唯一在MVC中「失敗」的是整體視圖狀態，它使得它看起來像所有的數據都在那裏。它最終都以HTML格式呈現，如果是網頁表單，則會使用加密的視圖狀態獲得巨大的令人討厭的隱藏輸入。 – asymptoticFault

是的，我並不是想大致抱怨webforms，只是看起來像我經歷了很多箍。 – Seth

我想最初MVC確實給人的印象是「哪裏都去了？」因爲它正在迴歸到網絡的真實無狀態本質以及客戶服務器模型的範例，在這種模式中，您並不總是擁有可用的信息，並像在桌面應用程序中那樣閒置，這正是Web Forms所要模擬的但在網上。 – asymptoticFault

輸入元素沒有text屬性。

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

存放在HTML-5數據 - 的信息*屬性

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

要檢索你可以使用

$(this).data('key')

來源

2013-08-06 20:19:11

TextBox呈現爲DOM內的

TextBoxFor是一個返回輸入的html助手。 – asymptoticFault

你說得對，我重新檢查過。我認爲這是editorFor的用武之地。 – Seth

jquery自動完成文本框：不同的值和文本

回答

相關問題