autocomplete - 如何扩展脚本自动完成程序？

Question

script.aculo.us 中的自动完成器期望服务器响应是 <ul>列表。我有什么方法可以扩展或替换这种行为，以便它可以采用 XML 或 JSON 文档的服务器响应？

是否还有一种方法可以扩展自动完成程序的渲染器，以便我可以将页脚添加到自动完成列表中？

Answer 1

是的，您可以扩展 script.aculo.us 的自动完成程序的行为。您可以通过覆盖 onComplete 来做到这一点。带有处理 json 数据并创建 <ul> 的代码的方法- 给你的 list 。然后将此列表发送至 updateChoices .

假设您在搜索“U”时将检索以下 JSON 响应:

[
  "Unicorn",
  "University"
]

可以处理上述响应的 Ajax.Autocompleter 扩展示例:

var MyCompleter = Class.create(Ajax.Autocompleter, {

    initialize: function($super, id_search, id_list, url, options) {
        $super(id_search, id_list, url, options);
    },

    onComplete: function(response) {
        var text = response.responseText;
        if (text.isJSON()) {
            this.handleJSON(text.evalJSON());
        }
        // else do nothing
    },

    handleJSON: function(json) {
        var htmlStr = '<ul>';
        json.each(function(item) {
            htmlStr += '<li>';
            htmlStr += item;
            htmlStr += '</li>';
        });
        htmlStr += '</ul>';
        this.updateChoices(htmlStr);
    }

});

还有一个例子说明如何 replace autocompleter's width reset behaviour .