Question

So, i have read at least 20-30 auto complete problems here on so and i cannot find any solutions. For some odd reason i keep getting value = undefined. Here is my code.

//Cycles through each input and turns it into a person searcher.
$.each(settings.input, function() {
    var input = $(this);
    input.autocomplete({
        delay: 70,
        minLength: 2,
        source: function(req, add) {
            var val = input.val();

            $.post(VUI.SITE_URL + "scripts/autocomplete/_AutoComplete.php", {q: val, display_count: settings.displayCount, action: "user"}, function(data) {
                data = eval("(" + data + ")");

                if (data.length > 0) {
                    var results = new Array(data.length);
                    $.each(data, function(key, value) {
                        results[key] = {desc: value, value: value.firstname + " " + value.lastname};
                    });
                    add(results);
                } else {
                    add(["No results..."]);
                }
            });
        },
        select: function(event, ui) {
            alert(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
        }
    }) // end auto complete.
    .data("autocomplete")._renderItem = function($ul, item) {
        var $li = $("<li></li>"),
            $inner = $("<div class='st-display side-content clearfix'style='padding-top:6px'></div>"),
            $a = $("<a></a>"),
            $img = $("<div class='image fl'></div>").html(ST.Image.getImage({
                uid: item.desc.uid,
                type: ST.ST_IMAGE_TYPE_THUMBNAIL_SMALL
            })),
            $content = $("<div class='content fl'></div>").html(
                item.desc.firstname + " " + item.desc.lastname + "<br/>" +
                "<span class='color:#979797;font-weight:bold'>" + item.desc.city + ", " + item.desc.state + "</span>"
            );

        $inner.append($img).append($content);
        $a.append($inner);
        $li.append($a);
        $ul.append($li); 

        return $ul;
    } // end _renderItem */

I tried to make it so that its very straight forward. But it wont work! (its facebook like auto complete). The auto complete displays properly (item does not equal undefined at that point), but when i highlight it, item becomes undefined so item.value (line 6347 of jquery.ui.1.8.13) throws exception!

Anyone see problems?

---

Here is something interesting… When i do not use data(“autocomplete”)._renderItem (for custom completion) the selecting works! … So why does overriding the custom rendering cause issues? I am even returning the UL.

Answer 1

The only thing in your code that’s different from a working version I’ve got of something very similar is that I initialise $li with:

var $li = $( '<li></li>' ).data('item.autocomplete', item);

That attaches the data to the list item which I think the autocomplete plugin uses to get the value at selection time.

Hope it helps