如何在 ASP.NET Core MVC 中使用 jQuery Ajax 自动完成与 ADO.NET
How to use jQuery Ajax autocomplete in ASP.NET Core MVC with ADO.NET
为自动完成添加的脚本:
$("txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: '/ProductSearchDisplay/GetProductDetailsById/',
data: "{'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
debugger
response($.map(data, function (item) {
return item;
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#txtSearch").val(i.item.val);
},
minLength: 1
});
})
发送列表数据的控制器方法:
public JsonResult GetProductDetailsById(String prefix)
{
List<ProductMaster> ObjProduct = new List<ProductMaster>();
ObjProduct = objProductData.SearchProductData(prefix).ToList();
ViewBag.data = ObjProduct;
return Json(ObjProduct);
}
该代码也不适用于自动完成搜索添加的脚本。
恐怕这个问题缺少“#”
这是我的测试代码
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<input id="txtSearch" />
<script>
$("#txtSearch").autocomplete({
//source: ["c++", "java", "php", "coldfusion", "javascript"],
source: function (request, response) {
var param = { "prefix": request.term};
$.ajax({
url: '/test/getData/',
//data: "{'prefix': '" + request.term + "'}",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
response($.map(data, function (item) {
return item;
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#txtSearch").val(i.item.val);
},
minLength: 1
});
</script>
这是我的控制器,我没有完成过滤器:
[HttpPost]
public JsonResult getData([FromBody] TestModel model)
{
List<string> res = new List<string>
{
"c++", "java", "php", "coldfusion", "javascript"
};
return Json(res);
}
为自动完成添加的脚本:
$("txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: '/ProductSearchDisplay/GetProductDetailsById/',
data: "{'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
debugger
response($.map(data, function (item) {
return item;
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#txtSearch").val(i.item.val);
},
minLength: 1
});
})
发送列表数据的控制器方法:
public JsonResult GetProductDetailsById(String prefix)
{
List<ProductMaster> ObjProduct = new List<ProductMaster>();
ObjProduct = objProductData.SearchProductData(prefix).ToList();
ViewBag.data = ObjProduct;
return Json(ObjProduct);
}
该代码也不适用于自动完成搜索添加的脚本。
恐怕这个问题缺少“#”
这是我的测试代码
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<input id="txtSearch" />
<script>
$("#txtSearch").autocomplete({
//source: ["c++", "java", "php", "coldfusion", "javascript"],
source: function (request, response) {
var param = { "prefix": request.term};
$.ajax({
url: '/test/getData/',
//data: "{'prefix': '" + request.term + "'}",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
response($.map(data, function (item) {
return item;
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#txtSearch").val(i.item.val);
},
minLength: 1
});
</script>
这是我的控制器,我没有完成过滤器:
[HttpPost]
public JsonResult getData([FromBody] TestModel model)
{
List<string> res = new List<string>
{
"c++", "java", "php", "coldfusion", "javascript"
};
return Json(res);
}