我在ASP.NET MVC5中編程。在我的觀點之一，我需要能夠創建一個搜索欄。對於這個例子，假設你正在搜索名字。當你開始輸入一個人的姓名時，所有的結果都會在你輸入時顯示在下拉列表中。動態搜索欄 - 在ASP.NET MVC5中添加下拉元素
這是我需要幫助的棘手部分。我希望在那裏爲每個條目在下拉列表中添加一個按鈕，以將該人員名稱「添加」到表格中。
例如，我正在尋找名稱「Debo」當我輸入「D-E-B」時，我在下拉列表中看到了我想要的名稱。我點擊「添加」，它會從下拉列表中刪除名稱「Debo」，並將其添加到我的表格中。一旦將「Debo」添加到表格中，我需要能夠看到Debo的年齡和性別，我不會在下拉列表中看到。
我沒有任何代碼示例，因爲我甚至不知道從哪裏開始。我已經研究過這樣瘋狂，但我找不到任何東西。任何幫助或指引我在正確的方向，將不勝感激，
我使用JQueryUI自動完成。 請參閱下面的代碼，希望它會幫助你。
JavaScript代碼：
$("#member_CompanyName").autocomplete({
highlightClass: "bold-text",
search: function() {
$(this).addClass('working');
},
source: function (request, response) {
var companyDetails = new Array();
$.ajax({
url: "/ControllerName/JsonActionResult",
async: false,
data: {
"parm": request.term
},
success: function (data) {
if (data.length === 0) {
companyDetails[0] = {
label: "No Result Found",
Id: ""
};
} else {
for (var i = 0; i < data.length; i++) {
companyDetails[i] = {
label: data[i].Value,
Id: data[i].Key
};
$("#no-companyfound").css("display", "none");
}
}
}
});
response(companyDetails);
},
minLength: 2,
select: function (event, ui) {
/*Select Function works on when you selects element from Response List*/
$.ajax({
async: false,
url: "/ControllerName/JsonActionResultonClick",
data: {
"id": ui.item.Id
},
success: function (data) {
// Do your success logic here
},
error: function (xhr, ajaxOptions, thrownError) {
// Error Logic here
}
});
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
控制器代碼：
[HttpGet]
public JsonResult JsonActionResult(string parm) {
// Replace your special Character like "-,~" etc from your search string
var result = new List < KeyValuePair < string,
string >>();
foreach(var item in _obj_fulldetails.GetCompanylistSearch(parm)) {
result.Add(new KeyValuePair < string, string > (item.Value.ToString(), item.Text));
}
return Json(result, JsonRequestBehavior.AllowGet);
}
您可以實現 「添加」 按鈕， 你對項目的邏輯選擇。如果你仍然想要添加按鈕，你可以編輯JS的響應字符串。
看我的反應截圖：
現在想起來，我不知道是否會更容易有一個「添加」按鈕，在下拉列表之外。並將選定的元素添加到表格中。 – Debo
一個'
爲什麼你想添加按鈕，你可以通過點擊'Item'來完成你的邏輯？ –