到目前为止,我已经尝试过使用Bootstrap 3和twitter typeahead.js自动完成工作。 具体来说,我试图允许搜索学生的MySQL数据库。 当用户从自动建议结果中选择学生时,我还需要除名称之外的其他数据,在这种情况下是他们的ID。 以下是返回的一些示例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一起工作。
非常感谢帮助。
I've tried with no success so far to get auto-complete working with Bootstrap 3 and twitter typeahead.js. Specifically, I'm trying to allow searching a MySQL database of students. When a user selects the student from the auto suggest results, I also need other data aside from the name, in this case their ID. Here is some example JSON that is returned:
[{"firstname":"Tyler","lastname":"Smith","id":"33"}, {"firstname":"Tyler","lastname":"Wilson","id":"190"}, {"firstname":"Tyler","lastname":"Doe","id":"347"}, {"firstname":"Tyler","lastname":"Carson","id":"377"}]I found this code, which works with a flat array of only names, so the above will not work:
$('#studentFName').typeahead({ name: 'FNameSearch', remote: 'students?query=%QUERY', updater: function(item) { return item; } })However I need more then just the first name, I need to be able to get the data along with the name and append it to a result div. I've done this in jquery UI, I just cant get it to work with typeahead.js.
Help is very much appreciated.
最满意答案
如果您使用的是最新版本的Twitter Typeahead.js( 0.10.2 ),这里有一个可能对您0.10.2的更新方法( 新演示 )。
有了这个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); });如果您正在使用Twitter的Typeahead.js pre 0.10.2那么这里的方法可能对您有用( 旧的演示指向缺少的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属性,该属性表示将在自动完成框中以可视方式显示的内容。 正如您所看到的,您可以自由保留所有单个数据元素(甚至使用相同的名称),以突出显示使用它们的方法我添加了一个额外的“详细信息表单”,可以在select上进行更新。
If you are using the latest version of Twitter Typeahead.js (0.10.2) here is an updated approach that might work for you (new demo).
With this 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>And this JavaScript (I'm using the local approach to avoid setting up a mock AJAX service though this will work with the remote data source approach as well)
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); });If you are using Twitter's Typeahead.js pre 0.10.2 then here is an approach that might work for you (old demo this points to a missing copy of typeahead.js, but I kept this in case it is still helpful):
Using the same HTML
And this JavaScript (I'm using the local approach to avoid setting up a mock AJAX service though this will work with the remote data source approach as well)
$('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); });The only change you need to make to your data is to add a value attribute that represents what will be visually displayed in the auto-complete box. As you can see you are free to keep all of your individual data elements (with the same names even), to highlight a way to use them I've added an extra "details form" that updates on select.
更多推荐
typeahead,js,名称,电脑培训,计算机培训,IT培训"/> <meta name="description&q
发布评论