将 jquery ui 自动完成结果包装成一个 href答案

【问题标题】：wrapping jquery ui autocomplete results in a href将 jquery ui 自动完成结果包装成一个 href
【发布时间】：2013-04-22 03:29:26
【问题描述】：

我使用这个函数将 jquery ui 自动完成函数的结果包装在一个超链接中。它无法做到这一点。它只显示标签项。这里有什么建议吗？

[{"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)
}

【问题讨论】：

到底发生了什么？我敢打赌<a> 标签是存在的——问题是当你点击它时它没有导航到该位置？
是的，这就是问题所在，但附加部分也是错误的。
skiweather.eu/v3/ajax/search.php?q=" + a.term + "&format=json" 中的 json 看起来如何？我确定这不是您粘贴在第一行的那个，因为它没有resort_name 和Resort_us 属性。
是的，和我粘贴的json一样。对 js 代码进行了一些更改以匹配 jason 文件（值、标签）。不返回超链接（不可点击）
如果你想测试：skiweather.eu/webcams/wallis

标签： jquery jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

如果您使用 jQueryUI >= 1.10，则需要使用 .data('ui-autocomplete')。如果您查看您网站的控制台，您会看到以下错误：

未捕获的类型错误：无法设置未定义的属性“_renderItem”

$("#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);
};

示例： http://jsfiddle.net/Aa5nK/51/

同样，不相关，但我建议使用更易于理解的变量名称（比 a 和 b 更具描述性的名称）。

【讨论】：