如何使用 Scriptaculous Ajax.Autocompleter 为 INPUT 和 DIV 元素设置不同的宽度？答案

【问题标题】：How to set different width for INPUT and DIV elements with Scriptaculous Ajax.Autocompleter?如何使用 Scriptaculous Ajax.Autocompleter 为 INPUT 和 DIV 元素设置不同的宽度？
【发布时间】：2011-02-15 00:37:18
【问题描述】：

我正在开发基于 Scriptaculous Ajax.Autocompleter 的自动完成框。

它通常可以工作，但我需要有更广泛的选择列表（见image -- 绿线 -- 320px）然后输入框（见image -- 红线 -- 155px）。

我的第一次尝试是使用 CSS 类设置各种 width（如上），但它不起作用 - 选项列表变得与输入框一样宽。

根据 Firebug，我的 CSS 类定义的 width 被 width 覆盖，由 element.style CSS 类设置，这似乎是由 Ajax.Autocompleter 定义的。

我的第二次尝试是在创建Ajax.Autocompleter 后设置width 以供选择列表

$("isearch_choices").setStyle({width: "320px"});

但它也没有用:(。

没有更多的想法:(。

如何为 Scriptaculous Ajax.Autocompleter 的选项列表设置不同的宽度？

下面是完整的代码示例：

<html>
    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>

        <style>
            input.iSearchInput {
                width: 155px; 
                height: 26px; 
                margin-top: 7px; 
                line-height: 20px;
            }

            div.iSearchChoices {
                position:absolute;
                background-color:white;
                border:1px solid #888;
                margin:0;
                padding:0;
                width: 320px;
            }      
            div.iSearchChoices ul {
                list-style-type:none;
                margin:0;
                padding:0;
            }

            div.iSearchChoices ul li.selected { background-color: #ffb;}

            div.iSearchChoices ul li {
                list-style-type:none;
                display:block;
                margin:0;
                padding:2px;
                height:32px;
                cursor:pointer;
                border-bottom: 1px dotted #929292;
            }

        </style>
    </head>
    <body>

        <input type="text" maxlength="255" class="input iSearchInput" name="isearch_value" id="isearch" value="Search" onfocus="this.select()">
        <br>
        <div id='isearch_choices' class='iSearchChoices'></div>

    </script>


</body>

<script>
    function iSearchGetSelectedId(text, li) {
        console.log([text, li.innerHTML].join("\n"));
        document.location.href = li.getAttribute("url");
    }

    document.observe('dom:loaded', function() {
        try {
            new Ajax.Autocompleter("isearch", "isearch_choices", "/url", {
                paramName: "phrase", 
                minChars: 1,
                afterUpdateElement : iSearchGetSelectedId
            });
        }
        catch (ex) {
            alert(ex);
        }

        $("isearch_choices").setStyle({width: "320px"});



    });

</script>

</html>

并使用result链接到图像。

【问题讨论】：

标签： ajax scriptaculous autocomplete

【解决方案1】：

Base.Autocompleter 实现自动在自动完成列表中重置宽度。 Base.Autocompleter 会将列表设置为与搜索输入字段相同的宽度。有几种方法可以解决这个问题：

1。自己修补 Autocompleter.Base

您可以按照this post 的说明自行修补Autocompleter.Base 脚本。对于第 68 行的 controls.js 中的 script.aculo.us 版本 1.8.1，您有以下内容：

Position.clone(element, update, {
  setHeight: false, 
  offsetTop: element.offsetHeight
});

将setWidth: false 添加到该选项对象中，如下所示：

Position.clone(element, update, {
  setWidth: false,
  setHeight: false, 
  offsetTop: element.offsetHeight
});

2。扩展您的自动完成器

以下示例用于扩展Ajax.Autocompleter。想法是替换基类将调用的onShow 函数，以显示自动完成器并使用Position.clone() 调整其大小。

/**
 * Extension of Ajax.Autocompleter that disables width reset.
 * @class
 */
var MyAutocompleter = Class.create(Ajax.Autocompleter, {

    /**
     * @constructor
     * @param $super reference to the base class (provided by prototype.js)
     * @param id_for_search the id for the search input element
     * @param id_for_list the id for autocompletion list element
     * @param url the ajax url to be used
     */
    initialize: function($super, id_for_search, id_for_list, url) {

        $super(id_for_search, id_for_list, url, {
            onShow: function(element, update) {
                if(!update.style.position || update.style.position=='absolute') {
                    update.style.position = 'absolute';
                    Position.clone(element, update, {
                        setHeight: false, 
                        setWidth: false,
                        offsetTop: element.offsetHeight
                    });
                }
                Effect.Appear(update,{duration:0.15});
            }
        });

    }

});

然后您像往常一样使用new 创建它，就像使用其他 Autocompleter 类一样。

document.observe("dom:loaded", function() {
    new MyAutocompleter('search', 'autoList', 'url/for/ajaxcall');
});

后者的好处是您可以更新 script.aculo.us 版本而无需重新修补文件，并且您可以根据自己的喜好继续重载和扩展 Autocompleter（假设您知道基类的行为方式）。

【讨论】：

还可以在options参数中添加“onShow”回调。

【解决方案2】：

似乎已修复。我修改了 CSS 样式表，看起来（视觉上）可以工作：

从DIV 元素中移除了边框并将其移动到UL 元素中。
为UL 元素添加width。

这是我的更改：

        div.iSearchChoices {
            position:absolute;
            background-color:white;
            /* border:1px solid #888; */
            margin:0;
            padding:0;
            /* width: 320px; */
        }      
        div.iSearchChoices ul {
            list-style-type:none;
            margin:0;
            padding:0;
            /* moved from div.iSearchChoices class */
            border:1px solid #888;
            width: 320px;
        }

【讨论】：