如何扩展脚本自动完成器？

发布于 2024-10-16 23:03:23 字数 222 浏览 1 评论 0 原文

script.aculo.us 中的自动完成程序期望服务器响应是

 列表。有什么方法可以让我扩展或替换此行为，以便它可以采用 XML 或 JSON 文档的服务器响应？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心碎的声音 2024-10-23 23:03:23

是的，您可以扩展 script.aculo.us 的自动完成程序的行为。您可以通过使用处理 json 数据的代码覆盖 onComplete 方法并为您创建

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

});

还有一个关于如何替换自动完成器的宽度重置行为。

Yes you can extend the behaviour of script.aculo.us's autocompleter. You do this by overriding the onComplete method with code that handles the json data and creates the <ul>-list for you. This list should then be sent to updateChoices.

Say you will retrieve the following JSON response when you search for "U":

[
  "Unicorn",
  "University"
]

An example of an extension of Ajax.Autocompleter that can handle the response above:

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

});

There is also an example on how to replace autocompleter's width reset behaviour.

回复收藏 0 原文

~没有更多了~