Jquery UI Autocomplete index number in select

Question

I wrote some auto complete code who works, the list is showing up, but now I need to make those clickable, I have an ID stored in the JSON who I call over ajax, but I can't get it in the 'select' section from the autocomplete, so I declared an array and filled it with the IDs in the 'source' mapping section. But I need to know the index number of the clicked/selected suggestion.

Here is my code:

// Declarations
var i   = 0;
var j   = 0;
var ids = []; // Array of ids

$('#search-bar').autocomplete(
{
    source : function(requete, reponse){
    $.ajax(
    {
            url : 'search/' + $('#search-bar').val(), // JSON source 
            dataType : 'json',
            success : function(data){
                reponse($.map(data, function(objet)
                {
                    ids[i] = objet.id;  // Filling up the array
                    i++;
                    return objet.name;
                }));
            }
        });
    },
    select: function (event, ui)
    {
        window.location = 'project/' + ids[j];  // Link the the project page
        j++;    // not working
    }
});

Here is an example of returned JSON:

[{"id":1,"name":"Project 1"},{"id":2,"name":"Project 2"}]

Someone knows how to replace my 'j' variable with the index of the clicked/selected entry ?

Constantin Galbenu · Accepted Answer · 2017-02-07 08:27:07Z

1

You should return an object in the source method, then in the select method use the id of the selected item to construct the url:

$('#search-bar').autocomplete(
{
    source : function(requete, reponse){
    $.ajax(
    {
            url : 'search/' + $('#search-bar').val(), // JSON source 
            dataType : 'json',
            success : function(data){
                reponse($.map(data, function(objet){
                    return {
                        label: objet.name,
                        value: objet.id,
                       id: objet.id
                    };
                }));
            }
        });
    },
    select: function (event, ui)
    {
        window.location = 'project/' + ui.item.id;
    }
});

edited Feb 7, 2017 at 8:27

answered Feb 7, 2017 at 8:15

Constantin Galbenu

17.8k3 gold badges41 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Constantin Galbenu Over a year ago

the idea is that response method can return a more complete object that contains also the ID of the item

Angelo Over a year ago

What do I need to return then ? Because with your code it says me syntax error on line value: objet.id,

Constantin Galbenu Over a year ago

sorry, I've missed a return

Collectives™ on Stack Overflow

Jquery UI Autocomplete index number in select

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related