jQuery UI自动完成小部件消失

Question

ODD behaviour from my Autocomplete. It all works fine but the result display is all messed up:

• if I press one key it will display the results just fine right below my searchBar using the widget;

• at the moment I press the second letter in my searchbar the widget disappears and the results are being displayed in my #body

I tried using of: "#searchBar", but it does not seem to fix the issue; I would like to keep the widget at all times.

here is my code:

$($("#searchBar").keyup(function() {
var querySearch = $("#searchBar").val();

$("#searchBar").autocomplete({

    source: function(request, response) {
        $.ajax({
            url: "php/queryDB.php",
            type: 'post',
            dataType: "json",
            of: "#searchBar",
            data: {
                action: 'autoComplete',
                parameter: querySearch
              },
            success: function(data) {
              response(data);
              }
            });
        }});
}));

I have the following code generated by autocomplete in my console: <input id="searchBar" type="text" name="SearchTextField" placeholder="Search" autocomplete="off" class="ui-autocomplete-input">

Answer 1

Turns out I had two issues:

safari was fooling me with its autocomplete so I was thinking it was the Jquery widget (first time using the Jquery method so that's why I did not realise) and I did not format my code properly

For info here is the final code that worked for me:

$("#searchBar").autocomplete({
    delay: 500,
    minLength: 2,
    appendTo: "#autocompleteResultsDiv",
    autoFocus: true,
    classes: {
              "ui-autocomplete": "highlight"
              },
    position: { my : "right top", at: "right bottom" },

   source: function(request, response) {

$.ajax({
    url: "DB.php",
    type: 'post',
    dataType: "json",
    cache: false,
    data: {
        action: 'autoComplete',
        parameter: $("#searchBar").val()
      },
    success: function(data) {
      response(data);
    }
  });
}
});