Использование Bootstrap 3 и Twitter typeahead.js для автозаполнения

Question

Я до сих пор не добился успеха, чтобы получить автоматическое завершение работы с Bootstrap 3 и twitter typeahead.js. В частности, я пытаюсь разрешить поиск в базе данных MySQL студентов. Когда пользователь выбирает учащегося из результатов автоматического поиска, мне также нужны другие данные, кроме имени, в этом случае их идентификатор. Вот несколько примеров JSON, который возвращается:

[{"firstname":"Tyler","lastname":"Smith","id":"33"}, 
{"firstname":"Tyler","lastname":"Wilson","id":"190"}, 
{"firstname":"Tyler","lastname":"Doe","id":"347"}, 
{"firstname":"Tyler","lastname":"Carson","id":"377"}] 

Я нашел этот код, который работает с плоским массивом только имена, поэтому выше не будет работать:

$('#studentFName').typeahead({ 
     name: 'FNameSearch', 
     remote: 'students?query=%QUERY', 
      updater: function(item) { 
      return item; 
     } 
    }) 

Однако мне нужно больше, чем просто первое имя, мне нужно иметь возможность получить данные вместе с именем и добавить его в div результата. Я сделал это в jQuery UI, я просто не могу заставить его работать с typeahead.js.

Справка очень ценится.

Answer 1

Если вы используете последнюю версию Twitter Typeahead.js (0.10.2), здесь приведен обновленный подход, который может сработать для вас (new demo).

С помощью этого HTML

<table> 
    <tr> 
    <td rowspan="3"><input name='students' type="text" placeholder="Students" /></td> 
    <td>First Name:</td> 
    <td><input name='FName' type="text" readonly="readonly" /></td> 
    </tr> 
    <tr> 
     <td>Last Name:</td> 
     <td><input name='LName' type="text" readonly="readonly" /></td> 
    </tr> 
    <tr> 
     <td>ID:</td> 
     <td><input name='ID' type="text" readonly="readonly" /></td> 
    </tr> 
</table> 

И этого JavaScript (я использую локальный подход, чтобы избежать создания макета службы AJAX, хотя это будет работать с подходом удаленного источника данных, а)

var substringMatcher = function(strs) { 
    return function findMatches(q, cb) { 
    var matches, substringRegex; 
    // an array that will be populated with substring matches 
    matches = []; 
    // regex used to determine if a string contains the substring `q` 
    substrRegex = new RegExp(q, 'i'); 
    // iterate through the pool of strings and for any string that 
    // contains the substring `q`, add it to the `matches` array 
    $.each(strs, function(i, str) { 
     if (substrRegex.test(str['value'])) { 
     // the typeahead jQuery plugin expects suggestions to a 
     // JavaScript object, refer to typeahead docs for more info 
     matches.push(str); 
     } 
    }); 
    cb(matches); 
    }; 
}; 
var students = [{ 
     "value": "Tyler Smith", 
     "firstname": "Tyler", 
     "lastname": "Smith", 
     "id": "33" 
    }, { 
     "value": "Tyler Wilson", 
     "firstname": "Tyler", 
     "lastname": "Wilson", 
     "id": "190" 
    }, { 
     "value": "Tyler Doe", 
     "firstname": "Tyler", 
     "lastname": "Doe", 
     "id": "347" 
    }, { 
     "value": "Tyler Carson", 
     "firstname": "Tyler", 
     "lastname": "Carson", 
     "id": "377" 
    }]; 

$('input[name=students]').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1 
},{ 
    name: 'Students', 
    displayKey: 'value', 
    source: substringMatcher(students) 
}).on('typeahead:selected', function (object, datum) { 
    // Example: {type: "typeahead:selected", timeStamp: 1377890016108, jQuery203017338529066182673: true, isTrigger: 3, namespace: ""...} 
    //console.log(object); 

    // Datum containg value, tokens, and custom properties 
    $('input[name=FName]').val(datum.firstname); 
    $('input[name=LName]').val(datum.lastname); 
    $('input[name=ID]').val(datum.id); 
}); 

---

Если вы используете Typeahead.js Твиттера предварительно 0.10.2 то здесь подход, который может работать для вас (old demo это указывает на СУИ петь копию typeahead.js, но я все это в случае, если это все еще полезно):

Используя тот же HTML

И это JavaScript (я использую локальный подход, чтобы избежать создания макет службы AJAX хотя это будет работать с подходом удаленного источника данных, а)

$('input[name=students]').typeahead({ 
    name: 'Students', 
    local: [{ 
     "value": "Tyler Smith", 
     "firstname": "Tyler", 
     "lastname": "Smith", 
     "id": "33" 
    }, { 
     "value": "Tyler Wilson", 
     "firstname": "Tyler", 
     "lastname": "Wilson", 
     "id": "190" 
    }, { 
     "value": "Tyler Doe", 
     "firstname": "Tyler", 
     "lastname": "Doe", 
     "id": "347" 
    }, { 
     "value": "Tyler Carson", 
     "firstname": "Tyler", 
     "lastname": "Carson", 
     "id": "377" 
    }] 
}).on('typeahead:selected', function (object, datum) { 
    // Example: {type: "typeahead:selected", timeStamp: 1377890016108, jQuery203017338529066182673: true, isTrigger: 3, namespace: ""...} 
    //console.log(object); 

    // Datum containg value, tokens, and custom properties 
    $('input[name=FName]').val(datum.firstname); 
    $('input[name=LName]').val(datum.lastname); 
    $('input[name=ID]').val(datum.id); 
}); 

Единственное изменение, которое нужно сделать, чтобы ваши данные, чтобы добавить атрибут value, представляющий то, что будет визуально отображаться в автозаполнение поле. Как вы можете видеть, вы можете хранить все отдельные элементы данных (с одинаковыми именами), чтобы выделить способ их использования. Я добавил дополнительную «форму сведений», которая обновляется при выборе.