jQueryUI的自動完成功能，顯示值，而不是標籤在MVC4 C＃

Question

使用jQueryUI的自動完成 - 我回來「代理人」與他們的ID一起，我的控制器返回正確的JSON如列表：

[{"tvid":12,"agentName":"Smith Gary"},{"tvid":43,"agentName":"Walls Arthur"},{"tvid":623,"agentName":"Mena Ati"}] 

我的JavaScript是：

$("#tvID").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "/AgentList/AutoCompleteAnalyst", 
      type: "POST", 
      dataType: "json", 
      data: { term: request.term }, 
      success: function (data) { 
       response($.map(data, function (item) { 
        return { value: item.tvid, label: item.agentName }; 
       })) 
      } 
     }) 
    }, 
    messages: { 
     noResults: "", results: "" 
    } 
}); 

而我的看法是：

 <div class="editor-label"> 
     @Html.LabelFor(model => model.tvID) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.tvID) 
     @Html.ValidationMessageFor(model => model.tvID) 
    </div> 

自動完成顯示正常，但是當我選擇一個越南e從列表中，填充上面的文本框的tvID（對數據庫有效，因爲它是我需要的tvID） - 但是，無論如何，我還是會在文本框中顯示agentName，在框中

自動完成顯示正確

但顯示TVID，而不是AGENTNAME

：它發佈時，控制器不會導致驗證錯誤

感謝您的幫助，

馬克

Answer 1

試試這個，告訴我，如果它的工作原理或不：

$("#tvID").autocomplete({ 
source: function (request, response) { 
    $.ajax({ 
     url: "/AgentList/AutoCompleteAnalyst", 
     type: "POST", 
     dataType: "json", 
     data: { term: request.term }, 
     success: function (data) { 
      response($.map(data, function (item) { 
       return { value: item.tvid, label: item.agentName }; 
      })) 
     } 
    }) 
}, 
messages: { 
    noResults: "", results: "" 
} 
}).data("autocomplete")._renderItem = function(ul,item){ 
    return $("<li>") 
       .append($("<a>").text(item.label)).append($("input:hidden")).attr("name","some_name").val(item.tvid) 
       .appendTo(ul); 
}; 

注意：您可能需要更改模型有點用這就像現在你將從隱藏字段而不是文本框獲得值。文本框只會提供名稱。

Answer 2

正如gaurav所建議的那樣，注入隱藏的輸入標籤與您將使用自動完成按原樣獲得的效果一樣好。即使選項有標籤和值，當您選擇一個選項時，該值將放入可見的輸入控件中，並完成其工作。

我可以看到幾個選項。

自定義自動完成

你可以使用兩個輸入，虛擬可見一個名字和一個隱藏的一個你想要提交的值（綁定到模型）。然後，您可以通過編寫自己的select處理程序來更改自動完成工作方式，該處理程序將採用標籤並將其放入可見輸入中，並將該值放入模型綁定的隱藏輸入中。

假設你有兩個輸入，第一個是可見的，用戶輸入用於搜索，第二個是隱藏的，將存儲提交/綁定的值，並且有一個tvidValue類，你可以像這樣配置自動完成：

focus: function(event, ui) { 
    //prevent the autocomplete's input from changing as the 
    //user navigates the available options. 
    this.selectedItem = null; 
    return false; 
}, 
select: function(event, ui) { 
    if (ui.item) { 
    valueCtl = $this.next("input.tvidValue").val(ui.item.value); 
    this.value = ui.item.label; 
    return false; 
    } 
} 

在HTML

然後，像下面這樣將讓你勾上tvidDisplay自動完成：

<input class='tvidDisplay' /> 
@Html.EditorFor(model => model.tvID, new { @class='tvidValue', style='display:none' }) 

用這種方式顯示先前值（編輯頁面上的不足之處;或後服務器端的瓦里dation失敗並返回到視圖）。您需要添加一個小函數以從模型綁定的隱藏輸入字段獲取值，並將其解析爲名稱以存儲在可見字段中。這可以通過使用包含這兩個值的ViewModel來緩解。

此外，如果用戶編輯搜索字段但未選擇有效的自動完成值，則select處理程序將不會觸發，並且您將不知道更新隱藏的輸入值。

換行自動完成

第二種方法

自定義控制 - 一個我選擇 - 是要創建自動完成的一種包裝。它在一些顯示名稱的HTML內部生成一個隱藏的輸入，一個用於刪除它的[x]。自動完成框永遠不會綁定到我的模型 - 它純粹是標記。生成的輸入會被賦予適當的name屬性，所以在提交時它們會像其他表單元素一樣由默認模型聯編程序捲起和綁定。它支持單人或多人，有能力從JSON對象恢復值（用於編輯頁面）等。

它仍然是一個早期版本，但它在內部運行良好。我只是對它進行了一些更新，以便更靈活地使用不同的服務端點並將其發佈到GitHub（live demo）。您可能需要修改getEntityHtml以改變其將值存儲到隱藏輸入字段的方式 - 現在它會使用分號連接值和標籤。這對我們在服務器端很有用，但它可能不適合所有人。該控件使用jQuery自動完成，並用jQuery UI類進行裝飾，以嘗試匹配頁面外觀/感覺，如果您使用的是jQuery UI主題。

完全披露：如果我在任何地方都使用'I'並不清楚，我是作者。