JQuery UI自动完成小部件消失

时间:2017-11-28 17:09:08

标签: javascript jquery autocomplete

我的自动填充功能中的ODD行为。 一切正常,但结果显示都搞砸了:

  • 如果我按下一个键,它会使用小部件在我的searchBar下方显示结果;

  • 目前我按下搜索栏中的第二个字母,小部件消失,结果显示在我的#body

我尝试使用of: "#searchBar",,但它似乎无法解决问题;我想随时保留小部件。

这是我的代码:

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

我在控制台中通过自动完成生成了以下代码: <input id="searchBar" type="text" name="SearchTextField" placeholder="Search" autocomplete="off" class="ui-autocomplete-input">

1 个答案:

答案 0 :(得分:0)

原来我有两个问题:

safari愚弄我的自动完成功能,所以我认为这是Jquery小部件(第一次使用Jquery方法,这就是为什么我没有意识到)并且我没有正确格式化我的代码

有关信息,这里是最适合我的代码:

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