带有值和文本字段的 ASP.NET MVC jquery 自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12511377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET MVC jquery autocomplete with value and text field
提问by Jalle
controller
控制器
public ActionResult Search(string id)
{
id= Request.QueryString["term"];
var routeList = db.Movies.Where(r => r.Title.Contains(id))
.Take(5)
.Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
return Json(routeList, JsonRequestBehavior.AllowGet);
}
View:
看法：
<input type="hidden" id="MovieID" name="MovieID" />
<input type="text" id="SelectedMovie" value=""/>
<script type="text/javascript" language="javascript">
$("#SelectedMovie").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Transaction/Search", type: "POST", dataType: "json",
data: { id: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.label, value: item.id }; //updated code
}));
}
});
},
select: function (event, ui) {
$("#MovieID").val(ui.item.value);
$("#SelectedMovie").val(ui.item.label);
return false;
}
});
</script>
I have some kind of videostore app. When I go to rent a movie I need a combobox with movies which I can select by using autocomplete. Also requirement is that only ID (value) is saved to the databas and not the text itself.
我有某种视频商店应用程序。当我去租一部电影时，我需要一个包含电影的组合框，我可以使用自动完成功能进行选择。还要求仅将 ID（值）保存到数据库而不是文本本身。
EDIT: here is the full working exqample
编辑：这是完整的工作示例
回答by JoeFletch
Since you are passing only a string to the Search()function on the server side, the dataelements that you are passing via the $.ajax()call need to be changed.
由于您仅将字符串传递给Search()服务器端的函数，因此data您通过$.ajax()调用传递的元素需要更改。
public ActionResult Search(string id)//I think that the id that you are passing here needs to be the search term. You may not have to change anything here, but you do in the $.ajax() call
{
id= Request.QueryString["term"];
var routeList = db.Movies.Where(r => r.Title.Contains(id))//this is a text filter no?
.Take(5)
.Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
return Json(routeList, JsonRequestBehavior.AllowGet);
}
$("#MovieID").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Transaction/Search", type: "POST", dataType: "json",
//original code
//data: { searchText: request.id, maxResults: 10 },
//updated code; updated to request.term
//and removed the maxResults since you are not using it on the server side
data: { id: request.term },
success: function (data) {
response($.map(data, function (item) {
//original code
//return { label: item.FullName, value: item.FullName, id: item.TagId };
//updated code
return { label: item.label, value: item.label, id: item.id };
}));
},
select: function (event, ui) {
//update the jQuery selector here to your target hidden field
$("input[type=hidden]").val(ui.item.id);
}
});
},
});
Let me know if this works/helps!
让我知道这是否有效/有帮助！
回答by Faust
Your .ajax()call is not specifying in an id. it's not in your data{}object, nor is it in a querystringas part of the url parameter (either approach would work).
您的.ajax()电话未在id. 它不在您的data{}对象中，也不在 aquerystring作为 url 参数的一部分（两种方法都可以）。
Hence the null value in your Action method.
因此，您的 Action 方法中的空值。
Anyway, you are immediately over-writing the method's id argument with Request.QueryString["term"]. Why to do that??
无论如何，您立即使用Request.QueryString["term"]. 为什么要这样做？？
Instead of asking Request for the 'term' insidethe method,you just bind that to the
Actionmethod as a parameter itself like below :
而不是在方法内部询问“术语” ，您只需将其
Action作为参数本身绑定到方法，如下所示：
public ActionResult Search(string term)
{
var routeList = db.Movies.Where(r => r.Title.Contains(term))
.Take(5)
.Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
return Json(routeList, JsonRequestBehavior.AllowGet);
}
回答by Ronald Wildenberg
First, you should use the following return value from your function:
首先，您应该使用函数的以下返回值：
return { label: item.title, value: item.id };
According to the documentationyou have to return objects with labeland valueproperties (no idproperty). The label is what the user sees, the value is what's posted to the server.
根据文档，您必须返回具有label和value属性（无id属性）的对象。标签是用户看到的内容，值是发布到服务器的内容。
Second, you pass a searchTextand maxResultsin the Ajax call, so your action method should have two parameters: public ActionResult Search(string searchText, int maxResults).
其次，您在 Ajax 调用中传递了searchText和maxResults，因此您的操作方法应该有两个参数：public ActionResult Search(string searchText, int maxResults).
Can you apply these changes and see if it works?
您可以应用这些更改并查看它是否有效吗？
