Как установить ширину текстовой области, прикрепленной плагином autoSuggest для jQuery?

Я нашел отличный плагин для автозаполнения с помощью Javascript под названием AutoSuggest благодаря этому сообщению о переполнении стека:

плагин для разделения тегов (например, интерфейс входных тегов stackoverflow)

Вот ссылка на страницу автора плагина:

http://code.drewwilson.com/entry/autosuggest-jquery-plugin

Плагин autoSuggest устанавливает ширину поля input (type="text") для ввода запросов на 1000 пикселей, что намного больше, чем я хочу. Это каким-то образом переопределяет ширину, установленную в свойстве стиля поля ввода в документе HTML:

<div NAME="divAutoSuggest" ID="divAutoSuggest">
        <input type="text" NAME="editQuery2" ID="editQuery2" wrap="soft" style="margin-left:5px;width:600px;" title="Enter your search query here using plain English"></input>
</div>

Я также пытался использовать атрибут cols в определении поля ввода, но это тоже было проигнорировано. Я нашел другой пост Stack Overflow, в котором говорилось о перехвате настройки ширины во время события open, но пример был для подключаемого модуля autocomplete, а не для autoSuggest:

Изменение ширины виджетов автозаполнения jquery-ui по отдельности

Я все равно пробовал, используя этот код:

$(document).ready
(
function() 
{
    // Put jQuery related initialization code that must occur after the document is ready here.

    $("input[type=text]").autoSuggest
    (
        data.items, 
        {
            selectedItemProp: "name", 
            searchObjProps: "name",
            startText: "Enter Evernote tags here...",
            open: function(event, ui) 
            {
                $(this).autoSuggest("widget").css
                (
                    {
                        "width": 600
                    }
                );
            }
        } // data. items
    ); // $("input[type=text]").autoSuggest
} // function() 
); // $(document).ready

Но и это не сработало. может кто-нибудь сказать мне, как установить ширину поля ввода? Примечание. Я не говорю о раскрывающемся списке с записями автозаполнения, я имею в виду основную область ввода, где вы вводите текст, который запускает раскрывающийся список автозаполнения.


javascript jquery autosuggest jquery-autocomplete
person Robert Oschler    schedule 19.05.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы установить ширину для плагина AutoSuggest jQuery, вам нужно найти ul.as-selections в CSS, который поставляется с ним, и определите вашу ширину:

CSS

ul.as-selections {
  ...
  width: 400px; // define your width
  ...
}

Если вы не изменили исходный CSS, это выглядит так:

ИСХОДНЫЕ ОБЪЯВЛЕНИЯ CSS для ul.as-selections

ul.as-selections {
 list-style-type: none;
  border-top: 1px solid #888;
  border-bottom: 1px solid #b6b6b6;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  padding: 4px 0 4px 4px;
  margin: 0;
  overflow: auto;
  background-color: #fff;
  box-shadow:inset 0 1px 2px #888;
  -webkit-box-shadow:inset 0 1px 2px #888;
  -moz-box-shadow:inset 0 1px 2px #888;
}
person Zuul    schedule 19.05.2012
comment
Спасибо, это сработало. Есть ли способ узнать заранее, какую минимальную ширину autoSuggest считает необходимой на основе значений автозаполнения? При попытке вашего решения я заметил, что если я устанавливаю ширину слишком маленькой, ниже некоторого неизвестного мне значения, под полем ввода появляется горизонтальная полоса прокрутки. Как только я превысил это неизвестное значение, горизонтальная полоса исчезла. - person Robert Oschler; 19.05.2012
comment
Кажется, трудно угадать ширину будущего содержимого. И я подозреваю, что это может меняться и меняться со временем, единственное, что я могу вам предложить, это установить overflow-x:hidden;, чтобы горизонтальная полоса прокрутки не отображалась! (только что проверил, работает нормально) - person Zuul; 19.05.2012
comment
В другой теме, поскольку это решило вашу проблему, отметьте ответ как правильный, чтобы закрыть эту тему! - person Zuul; 19.05.2012