使用Bootstrap 3和Twitter typeahead.js进行自动完成(Using Bootstrap 3 and Twitter typeahead.js for autocomplete

使用Bootstrap 3和Twitter typeahead.js进行自动完成(Using Bootstrap 3 and Twitter typeahead.js for autocomplete)

到目前为止，我已经尝试过使用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服务，虽然这也适用于远程数据源方法）

如果您正在使用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)

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