Twitter Typeahead Not autocompleting when I continue typing

Question

Here's my typeahed html and js codes:

HTML

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

TypeAhead code:

section scripts {

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

}

basically, I have an input field which is supposed to display firstname, middlename and last name. Typeahead does an auto complete for firstname only. It does fetch the correct records and why type in the first name, it does give me the suggestion for the full name. However, When I continue typying the middle name, auto complete does not work. Is there something I am missing in my code ?

Here's the picture

Answer 1

I finally fixed this issue by creating a variable called FullName which is a concatenation of first name, middle name and last name. Then, I used it as a datumtokenizer instead of just first name.

Answer 2

I have done something like below and I can search for multiple columns:

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>