Как установить разную ширину для элементов INPUT и DIV с помощью Scriptaculous Ajax.Autocompleter? - PullRequest
Новая
       36

Как установить разную ширину для элементов INPUT и DIV с помощью Scriptaculous Ajax.Autocompleter?

1 голос
/ 27 апреля 2010

Я работаю над блоком автозаполнения на основе Scriptaculous Ajax.Autocompleter .

В целом это работает, но мне нужно иметь более широкий список вариантов (см. изображение - зеленая линия - 320 пикселей), а затем поле ввода (см. изображение - красная линия - 155 пикселей).

Моей первой попыткой было установить различные 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>

И ссылка на изображение с результатом .

Ответы [ 2 ]

1 голос
/ 14 февраля 2011

Ширина автоматически сбрасывается в списке автозаполнения реализацией Base.Autocompleter. Base.Autocompleter установит ширину списка равной ширине поля поиска. Есть несколько способов обойти это:

1. Патч Автозаполнение. База самостоятельно

Вы можете установить скрипт 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. Удлините свой автозаполнение

Пример ниже предназначен для расширения 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, как и с другими классами автозаполнения. 

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

Преимущество последнего заключается в том, что вы можете обновить версию script.aculo.us без повторной загрузки файлов, и вы можете продолжать перегружать и расширять Autocompleter по своему вкусу (если вы знаете, как ведет себя базовый класс). 1029 *

0 голосов
/ 28 апреля 2010

Кажется исправленным. Я изменил таблицы стилей CSS и, кажется (визуально), работает:

  1. Удалена граница элемента DIV и перемещен элемент UL.
  2. Добавить 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;
        }
...