Make Jquery UI autocomplete responsive
<p>I need to display autocomplete list responsive</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(function() {

    //autocomplete
    $(".search_textbox").autocomplete({
        source: "../autocomplete.php",
        minLength: 1,
        create: function (event, ui) {   
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('&lt;li&gt;').append('&lt;div class="autocompleteStore"&gt;' + item.key +
                    '&lt;/div&gt;&lt;div class="autocompleteCashback"&gt;&lt;span class="cashback-icon"&gt;&lt;/span&gt;&lt;span class="cashback-text"&gt; &lt;span class="ac_cashback"&gt;'+item.desc+'&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;').appendTo(ul).css("position", "static");;
            };
        },
        select: function (e, ui) {
            var label = ui.item.label;
            var data = $('#searchtext').val(label);
            document.searchfrm.submit();
        } 

    });             

});

&lt;/script&gt;
</code></pre>

<p>**I tried the following solution to move the div to the autocomplete textbox ** </p>

<p><a href="https://stackoverflow.com/questions/13018669/jquery-ui-autocomplete-how-to-write-the-results-inside-a-div-using-innerhtml">Jquery UI autocomplete. How to write the results inside a div using innerHTML?</a></p>

<p><strong>Solution for moving the div to respective div was following</strong>:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(function() {

    //autocomplete
    $(".search_textbox").autocomplete({
        source: "../autocomplete.php",
        minLength: 1,
        open: function (event, ui) {
            $("#auto-complete").show();
            return $('&lt;li&gt;')
            .append('&lt;div class="autocompleteStore"&gt;&lt;/div&gt;&lt;div class="autocompleteCashback"&gt;&lt;span class="cashback-icon"&gt;&lt;/span&gt;&lt;span class="cashback-text"&gt; &lt;span class="ac_cashback"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;')
                .appendTo("#auto-complete")
                .css("position", "static");

        select: function (e, ui) {
            var label = ui.item.label;
            var data = $('#searchtext').val(label);
            document.searchfrm.submit();
        } 

    });             

});

&lt;/script&gt;
</code></pre>

<p>But this solution make it responsive but, data is not coming in open function. So I have decided to use create function and display data responsive.</p>