Jquery ui автозаполнение позиционирования неправильно

с помощью jquery ui 1.8 попытка автозаполнения

Все работает независимо от того, что ui-меню не расположено под моим элементом ввода, а скорее в левом верхнем углу.

Кто-нибудь сталкивался с этой проблемой?

Вот мой html:

<div id="search">
    <div id="searchFormWrapper">
        <form method="post" name="searchForm" id="searchForm" action="/searchresults">
        <label for="searchPhrase" id="searchFor">
            Search for</label>
        <input name="searchPhrase" id="searchPhrase" type="text" />
        <label for="searchScope" id="searchIn">
            in</label>
        <select name="searchScope" id="searchScope">
            <option value="">All Shops</option>
            ...
        </select>
        <input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif"
            alt="Search ..." />
        </form>
        <br class="clear" />
    </div>
</div>

и вот мой css:

#search
{
 width:100%;
 margin:0;
 padding:0;
 text-align:center;
 height:36px;
 line-height:36px;
 background:#666 url(/images/interface/info_bar_bg.gif) repeat-x top left;
 overflow:hidden;
 font-size:12px;
}
#searchFormWrapper
{
 width:520px;
 height:36px;
 overflow:hidden;
 margin:auto;
 padding:0;
}
label#searchFor
{
 display:block;
 float:left;
 width:80px;
 padding:0 5px 0 0;
 margin:0 0 0 0;
 text-align:right;
}
label#searchIn
{
 display:block;
 float:left;
 width:20px;
 padding:0 5px 0 0;
 margin:0 0 0 0;
 text-align:right;
}
#searchPhrase
{
 display:block;
 float:left;
 width:120px;
 margin:7px 0 0 0;
 padding:0;
}
#searchScope
{
 display:block;
 float:left;
 width:120px;
 margin:7px 0 0 0;
 padding:0;
}
#submitSearch
{
 display:block;
 float:left;
 margin:7px 0 0 10px;
 padding:0;
}

и вот мой javascript:

$(document).ready(function()
{
    $("#searchPhrase").autocomplete(
    {
        source: "/search?json",
        minLength: 2
    });
});

Ответы

Ответ 1

Woohoo. Нашел виновника:

<script type="text/javascript" src="/scripts/jquery/132/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="/scripts/jquery/132/jquery-ui-1.8.custom.min.js"></script>
            <script type="text/javascript" src="/scripts/jquery/100325/jquery.dimensions.js"></script>
            <script type="text/javascript" src="/scripts/jquery/100325/jquery.tooltip.js"></script>

Не включать jquery.dimensions.js. Я предполагаю, что это уже в jquery-ui.js... во всяком случае, это исправило мою проблему.

Для последнего jqueryUI теперь вам нужно включить jquery.ui.position.js

Ответ 2

Я просто изменил свой jquery-ui.min.js на последнюю версию и зафиксировал позиционирование.

от 1.8.16 до 1.8.23, и это сработало!

Ответ 3

У меня была аналогичная проблема, и после поиска я узнал, что мне не хватает JS, чтобы исправить это. В случае, если кто-то остановится, убедитесь, что вы также вызвали "jquery.ui.position.js" script.

См. http://jqueryui.com/demos/autocomplete/ в зависимостях: Интерфейс пользовательского интерфейса Виджет UI Позиция пользовательского интерфейса

Ответ 4

Просто обновление до последнего JQueryUI сделало трюк для меня. Я начал эту проблему после того, как переключился на Twitter Bootstrap (и последний JQuery, который я тоже думаю).

Ответ 5

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

Я обновил jQuery, из-за чего меню появилось в left:0; top:0; на window, а не ниже моего ввода.

Обновление пользовательского интерфейса jQuery мгновенно исправлено. Надеюсь, что это кому-то полезно.

Ответ 6

Обновите сценарии JQuery JQuery и jQuery в вашем проекте, он разрешит любой конфликт, и проблема будет исправлена.

Ответ 7

ставить

position: relative;

внутри

#searchFormWrapper

Ответ 8

Другая аналогичная проблема, если вы используете CDN для работы с вашими файлами jquery, убедитесь, что вы используете определенную версию, то есть:

//ajax.googleapis.com/ajax/libs/jquery/1.7.2/

Вместо "последней" версии:

//ajax.googleapis.com/ajax/libs/jquery/1/

Это уберет возможность конфликтов в будущих выпусках jquery, которые могут часто нарушать приложение, когда последняя версия jQuery обновляется на CDN.