jQuery 自动完成 ajax 输入错误时无法进行自动更正

Question

我正在尝试使用 Flask、Elasticsearch 和 jQuery 制作一个类似于 Google 的搜索栏的项目，它会根据给定的输入自动提供建议，并在出现问题时自动给出正确的建议输入错误。我已经成功地使用正确的拼写进行自动建议，但是当输入错误时，来自 Elasticsearch 的正确建议数据会出现在浏览器控制台中，但不会出现在自动完成下拉列表中。我使用 PySpark 将数据插入 Elasticsearch。我认为问题与 JS 文件有关，但不知道它是我的 JS 文件还是 jquery-ui 文件。我做错了什么？

JS:

    $(document).ready(function () {
    const $source = document.querySelector('#source');
    const $result = document.querySelector('#result');

    const typeHandler = function (e) {
        $result.innerHTML = e.target.value;
        console.log(e.target.value);

        $.ajax({
            url: "/ajax_call",
            type: 'POST',
            dataType: 'json',
            data: { 'data': e.target.value },
            success: function (html) {
                var data = html.aggregations.auto.buckets
                var bucket = []

                $.each(data, (index, value) => {
                    bucket.push(value.key)
                });
                
                console.log(bucket)
                $("#source").autocomplete({
                    source: bucket
                });
            }
        });
    }
    $source.addEventListener('input', typeHandler)
});

正确输入：

输入错误：

正确输入的数据

Answer 1

考虑以下示例。

$(function() {
  const $source = $('#source');
  const $result = $('#result');

  $source.autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "/ajax_call",
        type: 'POST',
        dataType: 'json',
        data: {
          'data': request.term
        },
        success: function(html) {
          var data = html.aggregations.auto.buckets;
          var bucket = [];

          $.each(data, (index, value) => {
            bucket.push(value.key);
          });

          console.log(bucket);
          response(bucket);
        }
      });
    }
  });
});

查看更多：

jQuery 自动完成 ajax 输入错误时无法进行自动更正

jQuery autocomplete ajax not working for autocorrection when wrong input is given

javascript

jquery

jquery-ui

flask

elasticsearch