[英]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一起工作。
非常感谢帮助。
如果您使用的是最新版本的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上进行更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.