如何设置与Scriptaculous的于Ajax.Autocompleter INPUT和DIV元素

我基于autocompleter箱的工作是Scriptaculous于Ajax.Autocompleter 。

它的工作原理一般，但我需要有更广泛的选择列表（见图片 -绿线- 320像素），然后输入框（见图片 -红线- 155px）。

我的第一次尝试是设置不同width的CSS类 （比如上图），但它没有工作-的选项列表变得一样宽的输入框。

据Firebug的width由我的CSS类定义被覆盖width由设置element.style CSS类，它似乎被定义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>

并链接到的图像，其结果。

Answer 1:

宽度在自动完成列表自动复位Base.Autocompleter实施。该Base.Autocompleter将列表设置为具有相同的宽度作为搜索输入域。有一对夫妇的方法去解决此问题：

1.补丁Autocompleter.Base自己

您可以修补Autocompleter.Base通过描述自己的脚本这个帖子。对于script.aculo.us版本1.8.1中controls.js在第68行，你有以下几种：

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功能，基类将为了显示autocompleter，并调整其大小调用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扩展到您的喜好（因为你知道基类的行为）。

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

文章来源: How to set different width for INPUT and DIV elements with Scriptaculous Ajax.Autocompleter?