Jquery: Autocomplete with label

Question

I am trying to learn website development. While learning autocomplete feature of jquery, I tried to put in the labels.

    function autocomplete (data) {
        var data = data.toString();
        var availableTags = data.split(',');
        var autocompleteData = [];
        for (var i = 0; i < availableTags.length; i++){
            autocompleteData[i] = {};
            autocompleteData[i].label = i.toString();
            autocompleteData[i].value = availableTags[i];
        }
        $("#tags").autocomplete({
            source: autocompleteData,
            select: function (event, ui) {
                printautocomplete(event, ui)
            }
        });
    };

The autocomplete[i].value is a valid string.

 autocompleteData[0]
 Object {label: 0, value: "Peter"}

However, I do not see any suggestions. What is wrong with the way I am using the API?

The API says: "Array: An array can be used for local data. There are two supported formats:

An array of strings: [ "Choice1", "Choice2" ]
OR An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label. " Thank you.

score 1 · Answer 1 · answered May 07 '20 at 10:21

$('#sidebarSearch').autocomplete(
{
source: function(query, result)
    {
    var query = $('#sidebarSearch').val ();
    $.ajax(
        {
        url:"sidebarSearchFetch.php",
        method:"POST",
        data:{query:query},
        dataType:"json",
        success:function(data)
            {
            result($.map(data, function(item)
                {
                return {
                       label: item.name,
                       value: item.usrId
                      };
                }));
            }
        })
    },
appendTo: "#sidebar-form"
});

score 0 · Answer 2 · answered Sep 21 '14 at 08:23

0

I am skeptical of line 2 in your code (var data = String()data;) I would use: var data = data.toString();

But if you are sure that the autocompleteData elements do indeed have valid strings, then my best guess would be that perhaps you forgot to give the '#tags' id to your html entry field element.

Finally, if this is not it, to troubleshoot, I would try removing the select: option from the object you are passing to autocomplete() in the line that begins: $("#tags").autocomplete(... so that only the source options is passed.

Another thing to check out is when the code is being run. It is possible that a document.ready() function is needed to ensure that that when the autocomplete feature is added to the DOM element with the id '#tags', that the element has already been created.

answered Sep 21 '14 at 08:23

Ralph

305
1
6

it works completely fine if I use "source: availableTags" instead of "source: autocompleteData". – Manas Paldhe Sep 21 '14 at 08:29
The code is working, but it autocompletes based on label, not values. – Manas Paldhe Sep 21 '14 at 08:37
yes it is supposed to match the entered text to 'label' and then send the corresponding 'value' to whatever receives it in your page when the user submits the input. You can avoid this by only providing a 'value' in your `autocompleteData` objects(drop the line that adds label with i.string) or just send the array of string options (as you noticed this is `availableTags` anyway, so you can shorten your code by just using this array as is right after you initialize it. – Ralph Sep 21 '14 at 09:16

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

The autocomplete works fine. Instead of completing "value", it completes "label". So when I type in "1", it suggests "1", "10", "11", etc.

Autocomplete applying value not label to textbox answers how to change to to by-value.

edited May 23 '17 at 12:32

Community

1
1

answered Sep 21 '14 at 08:38

Manas Paldhe

766
1
10
32

Jquery: Autocomplete with label

3 Answers3