Question

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

HTML

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

TypeAhead code：

部分脚本 {

@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仅为名字自动完成。它确实获取了正确的记录以及为什么键入名字，它确实给了我全名的建议。但是，当我继续打字中间名时，自动完成功能不起作用。我的代码中是否缺少某些内容？

这是图片

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

Answer 2

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

Twitter Typeahead当我继续输入时不自动完成

2 个答案: