Как вернуть результат автозаполнения jquery в отдельный div? - PullRequest
Новая
       9

Как вернуть результат автозаполнения jquery в отдельный div?

8 голосов
/ 29 октября 2011

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

Ответы [ 4 ]

17 голосов
/ 30 октября 2011

Опция appendTo действительно работает, как и ожидалось, и если вы проверяете в DOM, элемент результатов <ul> будет присоединен к элементу. Однако из-за абсолютного позиционирования, сгенерированного jQueryUI, список по-прежнему отображается непосредственно под <input>.

Тем не менее, вы можете переопределить внутренний _renderItem, чтобы напрямую добавить результаты к совершенно другому элементу, например:

HTML 

<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>

JavaScript 

$('input').autocomplete({
    search: function(event, ui) {
        $('.test ul').empty();
    },
    source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li/>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('.test ul'));
};

Я также создал демо , чтобы продемонстрировать это. Обратите внимание, что в последней библиотеке jQuery не было полностью протестировано jQueryUI, поэтому я использую предыдущую версию, которая позволяет мне выбрать непосредственное включение jQueryUI в опции jsFiddle.

6 голосов
/ 30 октября 2011 
<div class="test">Output goes here:<br/></div>

<script>
  $("input#autocomplete").autocomplete({
    source: ["something", "something-else"],
    appendTo: ".text",
    position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
  });
</script>
2 голосов
/ 09 июня 2017

Ответ Хле сработал для меня и дает вам больше гибкости! Вот мой тестовый код, который был изменен его ответом: 

$("#autocomplete").autocomplete({
    minLength: 3,
    source: ["something", "something-else"],
    response: function(event, ui) 
    {
        console.log(ui.content);
        // put the content somewhere
    },
    open: function(event, ui) 
    {
        // close the widget
        $(this).autocomplete('close');
    }
});
2 голосов
/ 09 июля 2015

Мне нужно было больше контроля над тем, куда поместить данные, так вот как я поступил: 

$("#input").autocomplete({
    minLength: 3,
    source: [
        "ActionScript",
        "AppleScript",
        "Asp"
    ],
    response: function(event, ui) {
        console.log(ui.content);
        // put the content somewhere
    },
    open: function(event, ui) {
        // close the widget
        $(this).autocomplete('close');
    }
});
...