Question

我使用Bootstrap 3和兼容的Typeahead（https://github.com/bassjobsen/Bootstrap-3-Typeahead）。

该网站在Django上运行，我的查询从本地Postgres服务器返回信息。

当我尝试使用AJAX检索来源时，下拉列表不会出现 console.log(data.suggestions)打印一个字符串数组，因此AJAX调用本身似乎正在工作。我在使用process()函数做错了吗？

我的查询以{"suggestions" : ["str1", "str2", "str3"] }格式返回JSON文件，因此我使用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页面上生成建议的下拉列表。

EDIT2：巴斯·约翰森的榜样本身就很完美，这让我自己的情况更加令人费解。

在我的示例中，我在输入框中键入语音单词，查询返回可能的汉字（中文字符）候选列表。打字＆＃34;あ＆＃34;应该返回一个列表，如＆＃34;亜＆＃34;，＆＃34;相＆＃34;，＆＃34;爱＆＃34; ...

我添加了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"] }

现在正在搜索＆＃34; str＆＃34;给出了预期的结果：

使用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 Typeahead.js and Bootstrap 3 CSS的其他CSS后，为下拉菜单设置样式。

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

2 个答案: