title: jQuery UI Autocomplete box displaying
body: <p>I have a problem with triggering manually jQuery autocomplete box. The source comes with $.ajax and returns json. Also on 'open' function I append some custom items to the box. Now what I need is that when you click on the input then the autocomplete box shall be seen. It does not have to search or anything. Just show the box with custom appended items.</p>
  
  <p>I have tried minLength: 0 and $(this).autocomplete('search', ''); But these aint working. Any help would be appreciated.</p>
  
  <p>Current code:</p>
  
  <pre><code>$(".searchBox").autocomplete({
      delay: 300,
      open: function() {
          $('.ui-autocomplete').prepend('&lt;li class="nav-button ui-menu-close"&gt;&lt;a href="#"&gt;&amp;#215&lt;/a&gt;&lt;/li&gt;');
  
          var position = $('.ui-autocomplete').position(),
              left = position.left, top = position.right;
  
          $('.ui-autocomplete').css({left: 0,
              width: "auto",
              'z-index': 1000
          });
          $('.ui-menu-close').on('click', function() {
              $('.searchBox').autocomplete('close');
          });
      },
      source: function(request, response)
      {
          $.ajax({
          url: '/search',
          data: {
              'ajax' : 1,
              'query': request.term
          },
          timeout: 3000,
          dataType: 'json',
          success: function(data) {                           
              console.log(data)
          },
      });
      },
      minLength: 0
  }).focus(function() {
      $(this).data('autocomplete')._trigger('open');
      $(this).trigger('keydown.autocomplete');
  });
  </code></pre>
  
  <p>Thank you.</p>