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

Параметр 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.

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

$("#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');
    }
});

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

$("#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');
    }
});

Хотя этот вопрос довольно старый, но у меня есть довольно простое решение. Никакого хака, ничего просто в jQuery:

Вместо функции ответа автозаполнения просто добавьте данные ответа в div в случае успеха.

    $(document).ready(function () {
    $("#book-code-search").autocomplete({
      minLength: 2,
      delay: 500,
      source: function (request, response) {
       $.ajax( {
        url: "server side path that returns json data",
        data: { searchText: request.term, param2 : $("#type").val()},
        type: "POST",
        dataType: "json",
        success: function( data ) {
          $("#data-success").html(data.returnedData); //returnedData is json data return from server side response
          /* response($.map(data, function (item) {
               return {
              label: item.FullDesc,
              value: item.FullDesc                      
             }
          })) */
        }
      });
     }
    });
   });  

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='data-success' style='color: green;'></div>
<input type='text' placeholder='Enter Book Code' id='book-code-search' />
<input type='hidden' id='type' value='book'>