Javascript jQuery autocomplete ajax在输入错误时不进行自动更正

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

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)
});

正确输入：

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

---

输入错误：

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

---

正确输入错误的数据

---

考虑以下示例

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

请参阅更多：

---

谷歌搜索栏基于机器学习算法，即了解您的搜索，并根据mcuh人员搜索相同或最相似内容的方式向您推荐另一个搜索栏。谷歌的“自动更正”和“自动完成”不仅仅是基于名称或按名称排序。@Aggestor我说的与谷歌类似，与谷歌不同。我只希望控制台中出现的建议出现在下拉列表中，即使我的输入是错误的。@Varun您是否记录了正确的响应，而它只是没有显示在自动完成UI中，或者上面的屏幕截图是模拟的？@Joe这些屏幕截图不是模拟的，它们是从正在运行的Flask应用程序中截取的。我希望我的错误输入得到正确的响应，因此需要“自动更正”。我想要的回答是在第三个屏幕截图中进入控制台，但在第二个屏幕截图的下拉列表中没有显示。好的，在这种情况下，我建议您阅读一些关于“打字错误容忍度”和“模糊查询”的内容。这是一个好的开始：谢谢，非常感谢！这正是我要找的！顺便说一句，我还通过重写内置的autocomplete正则表达式逻辑来解决问题，但这使代码看起来脏兮兮的。不管怎样，你是个救生员！再次感谢。