How to return jquery autocomplete result to the separate div?

Question

I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?

Answer 1

The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.

That said, you can override the internal _renderItem to directly append results to a completely different element, for example:

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'));
};

I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.

Answer 2

<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>

Answer 3

I needed more control over where to put the data, so this is how I went about it:

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

Answer 4

hle's answer worked awesome for me and gives you more flexibility! Here is my test code that was modified by his answer:

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

Answer 5

Although this question is pretty old but i got a pretty easy solution. No hack, nothing just in jQuery way:

Instead of autocomplete response function, just add response data in div on success

    $(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'>