Twitter Typeahead Не автозаполнение, когда я продолжаю печатать

Вот мои набранные 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 выполняет автозаполнение только для имени. Он извлекает правильные записи, и зачем вводить имя, он предлагает мне полное имя. Однако, когда я продолжаю вводить отчество, автозаполнение не работает. Есть ли что-то, чего мне не хватает в моем коде?

Вот картинка введите здесь описание изображения


jquery autocomplete typeahead.js bloodhound
person bangbang    schedule 22.11.2017    source источник
comment
Предоставьте весь свой объект typeahead   -  person BASEER HAIDER JAFRI    schedule 22.11.2017
comment
Пожалуйста, взгляните на обновленный код.   -  person bangbang    schedule 22.11.2017
comment
замените datumTokenizer: Bloodhound.tokenizers.obj.whitespace('firstName') на datumTokenizer: Bloodhound.tokenizers.obj.whitespace и посмотрите, что получилось   -  person BASEER HAIDER JAFRI    schedule 22.11.2017
comment
я пробовал это.. но проблема не устранена.   -  person bangbang    schedule 22.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

Я сделал что-то вроде ниже, и я могу искать несколько столбцов:

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>

person BASEER HAIDER JAFRI    schedule 22.11.2017
comment
Это возможно, потому что значения переменных title содержат пробел. Итак, поскольку он запрашивает заголовок, он даст вам автозаполнение. Однако в моем случае у меня есть 3 разные переменные (firstName, middleName, lastName), разделенные пробелом. Итак, поскольку я запрашиваю только имя, я думаю, именно поэтому он показывает мне автозаполнение имени. Но я не знаю, как это исправить. - person bangbang; 23.11.2017

arrow_upward
0
arrow_downward

Я, наконец, исправил эту проблему, создав переменную с именем FullName, которая представляет собой объединение имени, среднего имени и фамилии. Затем я использовал его как токенизатор данных, а не просто имя.

person bangbang    schedule 24.11.2017