CODEWITHSUNDEEP
jquery-uijquery-ui-autocomplete
user367864
user367864

Reputation: 281

Jquery UI autocomplete select

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.

Upvotes: 4

Views: 57966

Answers (3)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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/

Upvotes: 8

Romias
Romias

Reputation: 14133

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

Upvotes: 0

lbstr
lbstr

Reputation: 2832

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);
    }
});​

Upvotes: 2

Related Questions