title: Make Jquery UI autocomplete responsive
body: <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>