JQuery 自动完成功能选择标签和值

Question

在我的 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 让我开始了，但我现在很困。感谢任何帮助。

Answer 1

根据你的描述和代码，如果你想自定义自动完成select项并传递一些特殊值给select方法，你应该设置正确的标签，值属性在响应方法中。

更多细节，您可以参考下面的例子：

由于不知道你在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>

结果：

JQuery 自动完成功能选择标签和值

JQuery AutoComplete function selecting label and value

jquery

jquery-ui-autocomplete

asp.net-core-mvc