Question

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

它一般都有效，但我需要更广泛的选择列表（参见image - 绿线 - 320px）然后输入框（参见image - 红线 - 155px）

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

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

我的第二次尝试是在创建width

后为Ajax.Autocompleter设置选项列表

$("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链接到图片。

Answer 1

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

1。 Patch 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。扩展你的Autocompleter

以下示例用于扩展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版本，并且你可以继续重载和扩展自动完成器（根据你知道基类的行为）。 / p>

Answer 2

似乎有待修复。我修改了CSS样式表，似乎（视觉上）可以工作：

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

以下是我的更改：

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

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

2 个答案:

1。 Patch Autocompleter.Base自己

2。扩展你的Autocompleter