当我继续输入时，Twitter Typeahead 没有自动完成答案

【问题标题】：Twitter Typeahead Not autocompleting when I continue typing当我继续输入时，Twitter Typeahead 没有自动完成
【发布时间】：2017-11-22 17:23:00
【问题描述】：

这是我输入的 html 和 js 代码：

HTML

 <input id="student" name="student" required data-rule-validStudent="true" type="text" value="" class="form-control" />

TypeAhead 代码：

部分脚本 {

@Scripts.Render("~/bundles/jqueryval")
<script>


    $(document).ready(function() {
        var vm = {
            bookIds: []
        };

        var students = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('firstName'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: '/api/students?query=%QUERY',
                wildcard: '%QUERY'

            } 
        });


        $('#student').typeahead({
                minLength: 2, //typeahead will query the server when user types atleast 3 letters
                highlight: true,  // the letters in the search result that match our query will be bold                  

            },
            {
                name: 'students',
                display: function (item) { return item.firstName + ' ' + item.middleName + ' ' + item.lastName + ' ' + '('+item.id+ ')' },
                source: students.ttAdapter()

            }).on("typeahead:select",
            function(e, student) {

                vm.studentId = student.id;

            });

            }
        });
</script>

}

基本上，我有一个输入字段，应该显示名字、中间名和姓氏。 Typeahead 仅对名字进行自动完成。它确实获取了正确的记录以及为什么输入名字，它确实给了我全名的建议。但是，当我继续输入中间名时，自动完成功能不起作用。我的代码中是否缺少某些内容？

这是图片

【问题讨论】：

提供您的整个预输入对象
请看一下更新后的代码。
将 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('firstName') 替换为 datumTokenizer: Bloodhound.tokenizers.obj.whitespace，看看发生了什么
我试过了..但问题仍然存在。

标签： jquery autocomplete typeahead.js bloodhound

【解决方案1】：

我已经做了类似下面的事情，我可以搜索多个列：

var data = [{
    title: "title B",
    desc: "Desc A"
},
{
    title: "title A",
    desc: "Desc B"
}];


var titles = new Bloodhound({
    datumTokenizer: function (data) {
        return Bloodhound.tokenizers.whitespace(data.title);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
});

var descs = new Bloodhound({
    datumTokenizer: function (data) {
        return Bloodhound.tokenizers.whitespace(data.desc);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
});




titles.initialize();
descs.initialize();

$('.typeahead').typeahead({
    highlight: true
}, {
    name: 'titles',
    displayKey: 'title',
    source: titles.ttAdapter()
}, {
    name: 'descs',
    displayKey: 'desc',
    source: descs.ttAdapter()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/bloodhound.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js-bootstrap-css/1.2.1/typeaheadjs.min.css" rel="stylesheet"/>


<div id="remote">
  <input class="typeahead" type="text" placeholder="search">
</div>

【讨论】：

这是可能的，因为标题变量值包含空格。因此，由于它正在查询“标题”，它会给你自动完成。然而，就我而言，我有 3 个不同的变量（名字、中间名、姓氏），由空格分隔。所以，由于我只按名字查询，我想这就是为什么它向我显示名字自动完成的原因。但我不知道如何解决这个问题。

【解决方案2】：

我最终通过创建一个名为 FullName 的变量来解决这个问题，该变量是名、中间名和姓氏的串联。然后，我将它用作 datumtokenizer 而不仅仅是名字。

【讨论】：