如何通过ajax使用Materialize自动完成插件？

我正在努力共同努力MaterializeCSS 自动完成插件 http://materializecss.com/forms.html#autocomplete使用我的 ajax 调用，以便根据输入字段中键入的内容动态加载数据。

我的 ajax 请求是在 keydown 事件中调用的。所有获取的数据都会自动推送到键/值对象数组中。

然后，我将自动完成函数放入ajax的成功函数中，键“data”的值是之前构建的对象数组。

看来我进展顺利，但是当我在浏览器中测试时，每次我输入一些内容时，建议下拉列表都会按预期显示结果，但不是在每次按键后更新，而是另一个下拉列表与前一个列表重叠，并且那么一个...

所以这是我的问题：如何避免下拉建议列表重叠，而是在每次按下按键时使其更新？

感谢您的帮助。

var dat = {};
$("input").on("keydown", function(e) {
    var d = {
        query: {
            prefix: {
                body: e.target.value
            }
        }
    };

    $.ajax({
        url: "https://xxxxxxxxxxxxxxx.eu-west-1.es.amazonaws.com/xxxxxxxxxxxxx",
        type: "POST",
        contentType: "application/json",
        crossDomain: true,
        data: JSON.stringify(d),
        dataType: "JSON",
        async: true,
        success: function(da) {
            var c = da.hits.hits.length;
            for (var i = 0; i < c; i++) {
                dat[da.hits.hits[i]._source.body] = null;
            }

            $("input").autocomplete({
                data: dat
            });
        },
        error: function(jqXHR, errorStatus, errorThrown) {
            console.log(jqXHR);
            console.log(errorStatus);
            console.log(errorThrown);
        }
    });
});

这是一个更清晰的例子。

• 它基于Materialized.js原始功能
• 在您键入时取消现有的 ajax 请求，这样您就不会得到重复的结果
• 如果删除“timeout”注释行，则只会在按键后经过“x”时间后调用 ajax 调用。当您快速打字以避免每次按键时调用 ajax（即使它们被取消）时，这可能很有用。

见下文：

initAutoComplete({inputId:'autocomplete-input',ajaxUrl:'/search/my-auto-complete-results'})


function initAutoComplete(options)
{  
  var defaults = {
    inputId:null,
    ajaxUrl:false,    
    data: {}
  };

  options = $.extend(defaults, options);
  var $input = $("#"+options.inputId);

  if (options.ajaxUrl !== false)
  {
    var $autocomplete = $('<ul id="myId" class="autocomplete-content dropdown-content"></ul>'),   
        $inputDiv = $input.closest('.input-field'),
        //timeout,
        runningRequest = false,
        request;

    if ($inputDiv.length) {
      $inputDiv.append($autocomplete); // Set ul in body
    } else {      
      $input.after($autocomplete);
    }

    var highlight = function(string, $el) {
      var img = $el.find('img');
      var matchStart = $el.text().toLowerCase().indexOf("" + string.toLowerCase() + ""),
          matchEnd = matchStart + string.length - 1,
          beforeMatch = $el.text().slice(0, matchStart),
          matchText = $el.text().slice(matchStart, matchEnd + 1),
          afterMatch = $el.text().slice(matchEnd + 1);
      $el.html("<span>" + beforeMatch + "<span class='highlight'>" + matchText + "</span>" + afterMatch + "</span>");
      if (img.length) {
        $el.prepend(img);
      }
    };

    $autocomplete.on('click', 'li', function () {
      $input.val($(this).text().trim());
      $autocomplete.empty();
    });

    $input.on('keyup', function (e) {

      //if(timeout){ clearTimeout(timeout);}
      if(runningRequest) request.abort();      

      if (e.which === 13) {
        $autocomplete.find('li').first().click();
        return;
      }

      var val = $input.val().toLowerCase();
      $autocomplete.empty();

      //timeout = setTimeout(function() {

        runningRequest=true;

        request = $.ajax({
          type: 'GET', // your request type
          url: options.ajaxUrl,        
          success: function (data) {
            if (!$.isEmptyObject(data)) {
              // Check if the input isn't empty
              if (val !== '') {
                for(var key in data) {
                  if (data.hasOwnProperty(key) &&
                      key.toLowerCase().indexOf(val) !== -1 &&
                      key.toLowerCase() !== val) {
                    var autocompleteOption = $('<li></li>');
                    if(!!data[key]) {
                      autocompleteOption.append('<img src="'+ data[key] +'" class="right circle"><span>'+ key +'</span>');
                    } else {
                      autocompleteOption.append('<span>'+ key +'</span>');
                    }
                    $autocomplete.append(autocompleteOption);

                    highlight(val, autocompleteOption);
                  }
                }
              }
            }                    
          },
          complete:function(){
            runningRequest = false;
          }        
        });
      //},250);
    });
  }
  else 
  {
    $input.autocomplete({
      data: options.data
    });
  }
}