问题描述
在我的 Net Core 3.1 MVC 项目中，我有一个使用 JQuery 的自动完成功能的搜索栏。我希望它显示选定的标签，但也以某种方式存储值（如 ID）。
它向我的后端发送一个 Ajax 请求，并在 Ajax 请求的 success() 部分接收回一个元组列表，它在 JQuery 中变成了一个
object [{"Item1" : "ID1","Item2": "SomeValue"},{...} ]。
我想要的是当用户从下拉列表中选择值时，标签和值都可以在下一个 JQuery 函数中使用（例如将其发送回后端进行进一步处理）。
我想我必须将此对象映射到一个数组，并在保留值的同时去掉键（Item1、Item2）。我不能让它工作。这是整个 Ajax 请求：
$('#addVideoPlaylist').autocomplete({
source: function (request,response) {
$.ajax(
{
url: '/AddVideoToPlaylist',dataType: "json",type: "GET",data: { term: request.term,maxResults: 10 },success: function (data) {
var data = $.parseJSON(data);
var arr = Object.keys(data).map(function (key) { return data[key]; }); // this doesn't do the trick to get the dictionary object into an array
response(data); //or arr,but Now these two variables are similar
}
});
},minLength: 3,delay: 1000,select: function (event,ui) {
$(this).val(ui.item.label);
videoId = ui.item.Item2;
}
});
This post 让我继续前进，但我现在很困。任何帮助表示赞赏。
解决方法
根据您的描述和代码，如果您想自定义自动完成选择项并传递一些特殊值给选择方法，您应该在响应方法中设置正确的标签、值属性。
更多细节，你可以参考下面的例子：
由于不知道你在asp.net core中是怎么返回json结果的，所以直接创建一个json文件使用
Json 格式如下：
{
"object" : [
{
"Item1": "ID1","Item2": "SomeValue1","Item3": "SomeValue1"
},{
"Item1": "ID2","Item2": "SomeValue2","Item3": "SomeValue3"
}
]
}
jQuery 代码：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$('#addVideoPlaylist').autocomplete({
source: function (request,response) {
console.log("f");
$.ajax(
{
url: '/json.json',dataType: "json",type: "GET",success: function (data) {
response(jQuery.map(data.object,function (item) {
var AC = new Object();
//Create a new object contains some property
// the label and value is the required one
AC.label = item.Item1;
AC.value = item.Item2;
//you could also store some value to get int the select method
AC.Item3 = item.Item3;
return AC
}) );
//or arr,but now these two variables are similar
}
});
},minLength: 3,delay: 1000,select: function (event,ui) {
//Here you could get the Selected value's label,value,Item3
//Since the lable is the ID,so we get the label
$("#SelectID").text(ui.item.label);
}
});
});
</script>
HTML 化妆：
<div class="ui-widget">
Id: <label id="SelectID"> </label>
<br />
<input id="addVideoPlaylist">
</div>
结果：
