Twitter typeahead - %QUERY 作为远程查询的字符串传递答案

【问题标题】：Twitter typeahead - %QUERY being passed as string for remote queryTwitter typeahead - %QUERY 作为远程查询的字符串传递
【发布时间】：2015-08-23 12:36:38
【问题描述】：

我在这里查看了许多threads（以及official examples），但我似乎找不到与我自己类似的问题。

我在这里可能有点厚 - 我的 %QUERY 字符串作为远程查询的一部分被传递，这显然是我不想要的。示例：

"NetworkError: 404 NOT FOUND - http://local.example.co:8000/search-schools/%QUERY"`

这是我的 JS（如您所见，我在一个页面上有多个输入框，每个输入框位于单独的 bootstrap3 选项卡上（这将是另一个问题的重点）：

<script type="text/javascript">

            var schoolSource = new Bloodhound({
                hint: false,
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                   url: '/search-schools/%QUERY'
                }
            });
            schoolSource.initialize();

</script>
<script type="text/javascript">

            $('#schoolSearch1').typeahead(null, {
                name: 'schoolSearch1',
                displayKey: 'name',
                source: schoolSource
            });

</script>
<script type="text/javascript">

            $('#schoolSearch2').typeahead(null, {
                name: 'schoolSearch2',
                displayKey: 'name',
                source: schoolSource
            });

</script>

行为： 我可以看到，当我在输入框中输入搜索文本时，会尝试与远程 URL 进行通信，但是它传递的是文字 %QUERY 字符串，而不是输入框中的内容。

我做错了什么？如何将查询字符串传递给 Bloodhound？

【问题讨论】：

标签： javascript typeahead.js

【解决方案1】：

根据 OP 链接中的示例，您可能应该在远程配置中包含 wildcard 属性。试试：

var schoolSource = new Bloodhound({
      hint: false,
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
          url: '/search-schools/%QUERY',
          wildcard: '%QUERY'
        }
}

【讨论】：

谢谢阿米特，我想我们是同时输入答案的。我会将您的回复标记为答案
在你的回答中你说你仍然不明白这一点。好吧，这就是 API 的定义方式。没有定义“默认”通配符，因此您需要指定值。

【解决方案2】：

一个简单的修复，虽然我仍然不明白为什么需要包含这个参数。简单地改变：

<script type="text/javascript">

            var schoolSource = new Bloodhound({
                hint: false,
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                   url: '/search-schools/%QUERY'
                }
            });
            schoolSource.initialize();

</script>

对此（注意远程中的其他条目）：

<script type="text/javascript">
    var schoolSource = new Bloodhound({
        hint: false,
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
           url: '{% url 'schoolSearchJSONResponseEmpty' %}%QUERY',
           wildcard: '%QUERY'
        }
    });
    schoolSource.initialize();
</script>

【讨论】：