Question

我在这里看了很多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？

Answer 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'
        }
}

Answer 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>

Twitter typeahead - ％QUERY作为字符串传递给远程查询

2 个答案: