Typeahead Bootstrap：没有显示 ajax 调用的下拉列表？

Question

我正在使用 Bootstrap 3 和兼容的 Typeahead (https://github.com/bassjobsen/Bootstrap-3-Typeahead)。

该站点在 Django 上运行，我从本地 Postgres 服务器查询 returns 信息。

当我尝试使用 AJAX 检索源时，下拉菜单没有出现。
console.log(data.suggestions) 打印字符串数组，因此 AJAX 调用本身似乎有效。 process() 函数我做错了吗？

我的查询 return 是一个 JSON 文件，格式为 {"suggestions" : ["str1", "str2", "str3"] }，所以我使用 data.suggestions 访问包含我的自动完成候选的数组。

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.getJSON(
            '/path/to/query/',
            { query: query },
            function (data) {
                console.log(data.suggestions);
                return process(data.suggestions);
            });
    }
});

但是，当我传入一个静态列表作为源时，会显示下拉菜单并且自动完成功能正常，因此问题似乎是 AJAX 调用所特有的。

var list = ['apple', 'amazon', 'astronaut', 'amigo']
$('.typeahead').typeahead({
  source:list
});

以下是我的 html 文件中包含 Django 模板文件的相关部分：

{% load staticfiles %}
<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
  </head>
  <body>
    <div class="container">
      <div class="starter-template">
        <form class="form-inline">
          <div class="form-group" id="results">
            <input type="text" class="form-control input-lg typeahead" name="query" id="kanji" data-provide="typeahead" placeholder="Enter..." autofocus="true" autocomplete="off">
          </div>
        </form>
      </div>
    </div><!-- /.container -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="{% static 'js/bootstrap3-typeahead.min.js' %}"></script>
    <script src="{% static 'js/script.js' %}"></script>
  </body>
</html>

编辑：
我尝试了 this question 的一些解决方案。然而，同样的事情仍然发生：结果打印到 javascript 控制台，但仍然没有在实际的 HTML 页面上生成建议下拉列表。

编辑2： Bass Jobsen 的例子本身就可以完美运行，这让我自己的情况更加令人费解。

在我的示例中，我在输入框中键入拼音单词，查询 return 是可能的汉字（汉字）候选列表。输入“あ”应该return一个像“亜”、“相”、“爱”这样的列表...

我添加了 minLength: 0，现在当我将输入字段留空时，整个数据库会以下拉列表的形式出现。但是当我开始打字时，下拉菜单消失了。所以查询工作正常，Typeahead 正在识别数组，但仅当我没有输入时？？

Answer 1

当我测试你的代码时，我没有发现问题:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <div class="container">
    <input type="text" class="typeahead">
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="Bootstrap-3-Typeahead/bootstrap3-typeahead.min.js"></script>
    <script>
    $('.typeahead').typeahead({
        source: function (query, process) {
            return $.getJSON(
                'test.json',
                { query: query },
                function (data) {
                    console.log(data.suggestions);
                    return process(data.suggestions);
                });
        }
    });    
    </script>

  </body>
</html>

与test.json:

{"suggestions" : ["str1", "str2", "str3"] }

现在搜索 "str" 给出了预期的结果：

使用 Bootstrap v 3.3.6

测试

Answer 2

事实证明我使用的 Typeahead 是错误的 - 我必须使用 Bloodhound 来处理远程数据源，尤其是对于动态查询。

我使用了 Ben Smith 的这个例子：

How do we set remote in Typeahead.js?

// Instantiate the Bloodhound suggestion engine
var kanji = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/api/get_kanji/?query=%QUERY',
        filter: function (data) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(data.suggestions, function (kanji) {
                return {
                    value: kanji
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
kanji.initialize();

// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
    displayKey: 'value',
    source: kanji.ttAdapter()
});

添加必要的脚本和 Bass Jobsen's Typeahead.js and Bootstrap 3 CSS 中的一些附加 CSS 来设置下拉菜单的样式后，现在一切正常。

Typeahead Bootstrap：没有显示 ajax 调用的下拉列表？

Typeahead Bootstrap: No dropdown shows for ajax calls?

ajax

jquery

json

typeahead.js

twitter-bootstrap-3