Javascript 可过滤自动完成，在烧瓶中使用ajax

因此，我正在设计一个html表单，它有两个输入字段

html模板代码：

<form role="form" action="/cities/" method="get" autocomplete="on">
    <label for="#input1"><strong>Country:</strong></label>
    <input id="#input1" type="text" name="country">
    <label for="#input2"><strong>State:</strong></label>
    <input id="#input2" type="text" name="state">
    <input type="submit" value="Go!">
</form>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $.ajax({
        url: '/autocomplete',
        type: 'GET',
        }
    }).done(function (data) {
        $('#input1').autocomplete({
            source: data,
            minLength: 2,
        });
    });
    }
</script>

其目的在于：

如果用户在#input1字段中输入部分国家名称，则自动完成国家名称。一旦用户从autocomplete中选择了一个国家，它将使用此国家数据过滤并返回autocomplete#input2的可能状态值。 同样，当用户首先在#input2字段中输入数据时，反之亦然

路由代码有点不完整，但假设过滤在那里进行得很好。 我一直关注的是ajax和js代码，它们是实现这一功能所必需的。 很多代码都是从其他SO答案中粘在一起的，但它主要是坏的，因为我是JS新手

---

有什么想法吗？谢谢

问题是Flask的默认内容类型是

text/html

，如果没有指定从服务器返回的数据类型，jQuery将嗅探返回数据的内容类型（如果我没有记错的话），以找出如何处理它。这意味着您的JSON数据将作为字符串而不是JavaScript对象传递给

autocomplete

Python方面的修复程序是用于将数据传回，这将导致返回正确的

应用程序/json

内容类型

头。您需要在对象中传回数据，因为

jsonify

不支持顶级数组：

return jsonify(data=results)

在JavaScript方面，您需要使用提取数据并将其传递给jQuery UI：

function handleAutoComplete(request, resultCallback) {
  // Explicitly tell jQuery we expect JSON back
  $.getJSON("/autocomplete?country=" + encodeURIComponent(request.term))
            // Handle successful responses *and* failures
            // to ensure the widget maintains the correct state
            .then(function(result) { resultCallback(result.data); })
            .fail(function(err) { resultCallback(); });
}

$('#input1').autocomplete({
  source: handleAutoComplete,
  minLength: 2
 });

---

你哪里出错了？@ZeeTee-事实上，我没有出错。相反，它根本不起作用。我可以在字段中输入文本，但不会显示自动完成。谢谢回答！我试过了，但是自动完成仍然没有出现。手动访问/autocomplete？country=XXX返回一个带有“data”键和值列表的JSON dict。然而，自动完成并没有出现。我是否缺少任何代码、明显的修复？是的-

id=“#input1”

应该是

id=“input1”

（因为jQuery使用

#

在DOM中按id查找元素-或者您需要将DOM查询更新为

$（'#input1'）

）。谢谢，它工作得很好！使用ajax而不是getJSON会有速度上的差异吗，因为它是不同步的？（我不熟悉JS编码）忽略我之前的评论，jQueryAPI文档声明.getJSON是等效的.ajax的缩写。

function handleAutoComplete(request, resultCallback) {
  // Explicitly tell jQuery we expect JSON back
  $.getJSON("/autocomplete?country=" + encodeURIComponent(request.term))
            // Handle successful responses *and* failures
            // to ensure the widget maintains the correct state
            .then(function(result) { resultCallback(result.data); })
            .fail(function(err) { resultCallback(); });
}

$('#input1').autocomplete({
  source: handleAutoComplete,
  minLength: 2
 });