jQueryUI autocomplete - размещать результаты поиска рядом с вводом в DOM - PullRequest
Новая
       0

jQueryUI autocomplete - размещать результаты поиска рядом с вводом в DOM

4 голосов
/ 06 декабря 2010

Я использую автозаполнение jQueryUI , но по следующим причинам я хотел бы переместить результаты поиска в DOM рядом с тегом ввода, который выполняет поиск.

Проще всего увидеть это на jsFiddle , но по сути код, демонстрирующий проблему, выглядит так: 

<html>    <head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/flick/jquery-ui.css" /> 

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> google.load("jquery", "1.4");
   google.load("jqueryui", "1.8");  </script>
<script>
$(function() {
    $("#X").autocomplete({
        source: ['abc', 'def', 'ghi']
    });
});
</script>
<style type="text/css">
   .B {   display: none;    }
   .A:hover .B { display: block;  }
</style>
</head>  <body>

Hello
<div class='A'>
select:
  <div class='B'>
    <input id='X' />
  </div>
</div>
World

</body>   </html>

Проблема заключается в том, что когда кто-то наводит указатель мыши на параметр автозаполнения, элемент, содержащий тег автозаполнения, больше не указывается в «mouseover'ed», и согласно правилам CSS тег ввода исчезает вместе с контейнером. Это не желаемое поведение; Я хотел бы, чтобы тег ввода был виден при выделении вариантов автозаполнения.

Я бы надеялся и ожидал, что можно будет переместить элементы автозаполнения в DOM рядом с тегом ввода (т. Е. x = $("#X"); x.append(x.autocomplete('widget'))), и, следовательно, правила CSS сохранят ввод и его родительский элемент видимым. Увы, это не работает.

Буду благодарен за любые мысли о том, как добиться этого сочетания CSS и jQueryUI.

Спасибо.

Brian

Ответы [ 2 ]

2 голосов
/ 06 декабря 2010

Вот ответ, который может быть предпочтительнее, чем у Эндрю Уитакера (и за билет, который я начал: http://bugs.jqueryui.com/ticket/6724):

Использование опции appendTo autocomplete, т.е. 

$("#X").autocomplete({
  appendTo: $(".B"),
  source: ['abc', 'def', 'ghi'],
});

Вы можете увидеть в действии на jsFiddle .

2 голосов
/ 06 декабря 2010

Это похоже на то, что должно поддерживаться изначально в jQuery UI! Во всяком случае, вот что я думаю, что будет работать: 

$("#X").autocomplete({
    source: ['abc', 'def', 'ghi'],
    open: function($event, ui) {
        var $widget = $("ul.ui-autocomplete");
        var $input = $("#X");
        var position = $input.position();

        $("div.B").append($widget);

        $widget.css("left", position.left + $input.width());
        $widget.css("top", position.top);       
    }
});

Это позиционирует виджет, перемещая поле автозаполнения справа от ввода, и решает проблему переноса, добавляя виджет к тому же <div>, которому принадлежит <input>.

http://jsfiddle.net/U2B9f/1/

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...