Jquery UI autocomplete select

Question

I need some help with the code below.

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push(val.name);
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.value);
    }
});

using FireBug, i'm getting this in my console :

jQuery171003666625335785867_1337116004522([{"name":"97300 Cayenne","zzz":"203"},{"name":"97311 Roura","zzz":"201"},{"name":"97312 Saint Elie","zzz":"388"},{"name":"97320 Saint Laurent du Maroni","zzz":"391"},{"name":"97351 Matoury","zzz":"52"},{"name":"97354 Remire MontJoly Cayenne","zzz":"69"},{"name":"97355 Macouria Tonate","zzz":"449"}])

Everything is working very fine, but I don't know how to get the value of 'zzz' on select item.

I tried

alert(ui.item.zzz);

But it doesn't work.

And what do you see if you do alert(ui.item) in the select function? — lbstr
– lbstr, Commented May 15, 2012 at 21:35
Try console.log(ui.item); in Chrome Should show the full object structure. — c.hill
– c.hill, Commented May 15, 2012 at 21:38

Dave Markle · Accepted Answer · 2013-04-23 20:45:34Z

8

The autocomplete widget expects a data source in array format with either:

Objects containing a label property, a value property, or both
Simple string values

You are currently building up the second (an array of string values), which works fine, but you can also slightly tweak your data as you iterate over it and also supply the other properties in the object:

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push({
                    label: val.name,
                    zzz: val.zzz
                });
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.zzz);
    }
});

Now, since the array you're supplying the widget contains objects with a name property, you should get autocomplete functionality and also gain access to the zzz property.

Here's a working example (without the AJAX call): http://jsfiddle.net/LY42X/

edited Apr 23, 2013 at 20:45

Dave Markle

98.3k20 gold badges152 silver badges172 bronze badges

answered May 15, 2012 at 22:55

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

6 Comments

user367864 Over a year ago

Hello, i've tryed your solution upper and i still get "undefined". Ok for your working exemple, but i have to make it work with the ajax call. Could you help?

Andrew Whitaker Over a year ago

What's the URL you're using? Since you're making a JSONP call I can probably make JSFiddle use the same URL.

user367864 Over a year ago

ok i make it work using your solution. I simply do : alert(ui.item.zzz); Et voilà!!

Andrew Whitaker Over a year ago

@user367864: Ah! I'm so sorry that was a typo in my answer, I've corrected it.

sergio Over a year ago

I don't know if you intended to make a working example or just the object being parsed properly, but typing on the search box returns ALL the results. The results shown should be only the ones matching the text entered, should they not?

|

lbstr · Accepted Answer · 2012-05-15 21:56:55Z

2

You're source function is only populating the name. If you want everything from that data structure, do this:

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push(val); //not val.name
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.value.zzz);
    }
});

edited May 15, 2012 at 21:56

answered May 15, 2012 at 21:39

lbstr

2,84220 silver badges29 bronze badges

1 Comment

user367864 Over a year ago

Hmm, i have try this, but it broke my autocomplete. I mean, when starting typing i get no results. I can see the "response" in Firebug but as far as i can see, val.name is not dispayed.

Romias · Accepted Answer · 2012-05-15 22:09:24Z

0

This seems to be an array of objects... what your may be missing is the "[0]" or in general "[index]".

Please check this: jqueryui.com/demos/autocomplete/#event-select

edited May 15, 2012 at 22:09

answered May 15, 2012 at 21:43

Romias

14.2k7 gold badges61 silver badges89 bronze badges

3 Comments

user367864 Over a year ago

It doesn't work also Yes it is an array, here is the php code of the file i'm calling via ajax $query = mysql_query("SELECT cv_ville,cv_numville FROM cms_code_ville WHERE cv_ville LIKE '%".$_GET['term']."%'"); //build array of results for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) { $row = mysql_fetch_assoc($query); $friends[$x] = array("name" => $row["cv_ville"] , "zzz" => $row["cv_numville"]); } //echo JSON to page $response = $_GET["callback"] . "(" . json_encode($friends) . ")"; echo $response;

Romias Over a year ago

Ahh, but what if you use: alert(ui[0].zzz) ??

Romias Over a year ago

This is firing once you select something. So "ui.item" is supposed to be the select item... or null if nothing is selected. So, you could check if ui.item is nothing to then retrive its property. In your json... you have "name" and "zzz"... so you could do "ui.item.name" or "ui.item.name.value".

Collectives™ on Stack Overflow

Jquery UI autocomplete select

3 Answers 3

6 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related