CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-ui-autocomplete
Mark Henry
Mark Henry

Reputation: 2699

wrapping jquery ui autocomplete results in a href

I use this function to wrap the results of the jquery ui autocomplete function in an hyperlink. It fails to do that. It just displays the label item. Any suggestion here?

[{"value":"morzine","label":"Morzine"},{"value":"grachen","label":"Grachen"},{"value":"fiesch","label":"Fiesch"},{"value":"zermatt","label":"Zermatt"},{"value":"saas-fee","label":"Saas Fee"},{"value":"bettmeralp","label":"Bettmeralp"},{"value":"riederalp","label":"Riederalp"},{"value":"jeizinen","label":"Jeizinen"},{"value":"crans-montana","label":"Crans Montana"},{"value":"simplon-dorf","label":"Simplon Dorf"}]

$("#srch").autocomplete({
    minLength: 3,
    source: function (a, b) {
        $.getJSON("http://skiweather.eu/v3/ajax/search.php?q=" + a.term + "&format=json", function (a) {
            b(a)
        })
    },
    select: function (a, b) {
        $("#srch").val(b.item.label);
        return false
    },
    focus: function (a, b) {
        $("#srch").val(b.item.label);
        return false
    }
}).data("autocomplete")._renderItem = function (a, b) {
    return $("<li></li>")
        .data("item.autocomplete", b)
        .append('<a href="/webcams/' + b.value + '"> ' + b.label + '</a>  ')
        .appendTo(a)
}

Upvotes: 2

Views: 1410

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

You need to use .data('ui-autocomplete') if you're using jQueryUI >= 1.10. If you look at the console for your website, you'll see the following error:

Uncaught TypeError: Cannot set property '_renderItem' of undefined 

$("#srch").autocomplete({
    minLength: 3,
    source: /* ... */,
}).data("ui-autocomplete")._renderItem = function (a, b) {
    return $("<li></li>")
        .data("item.autocomplete", b)
        .append('<a href="/webcams/' + b.value + '"> ' + b.label + '</a>  ')
        .appendTo(a);
};

Example: http://jsfiddle.net/Aa5nK/51/

Also, unrelated, but I would recommend using more understandable variable names (something more descriptive than a and b).

Upvotes: 3

Related Questions