JQuery AutoComplete function selecting label and value

Question

In my Net Core 3.1 MVC project I have a searchbar that uses JQuery's Autocomplete functionality. I want it to display the selected label, but somehow also store the value (like an ID).

It sends an Ajax request to my backend, and receives back a list of tuples in the success() part of the Ajax request, which in JQuery becomes an

object [{"Item1" : "ID1", "Item2": "SomeValue"}, {...} ].

What I want is when the user selects the value from the dropdown list, both label and value can be worked with in a next JQuery function (like sending it back to the backend for further processing).

I figured I have to map this object to an array, and get rid of the keys (Item1, Item2) while retaining the values. I cannot get this to work. Here's the whole Ajax request:

$('#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 got me underway, but I'm pretty stuck now. Any help is appreciated.

Answer 1

According to your description and codes, if you want to customize the autocomplete select item and pass some special value to the select method, you should set the right label, value property in the response method.

More details, you could refer to below example:

Since I don't know how you returned the json result in asp.net core, I directly create a json file to use.

Json format like below:

{
  "object" : [
    {
      "Item1": "ID1",
      "Item2": "SomeValue1",
      "Item3": "SomeValue1"
    },
    {
      "Item1": "ID2",
      "Item2": "SomeValue2",
      "Item3": "SomeValue3"
    }
  ]
}

jQuery code:

<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 makeup:

<div class="ui-widget">

    Id: <label id="SelectID"> </label>
    <br />

    <input id="addVideoPlaylist">
</div>

Result: