我正在使用 Bootstrap 3.3.6、JQuery 1.11.0、Bootstrap3-typeahead 4.0.2 和 bootstrap-tagsinput 0.8.0。
这是我的代码:
$(function() {
$('.tagsinput-typeahead').tagsinput({
confirmKeys: [13],
itemValue: 'value',
itemText: 'text',
typeahead: {
displayKey: 'text',
afterSelect: function(val) { this.$element.val(""); },
source: function (query) {
return jQuery.get("typeaheadSource.php?q=" + query);
// return jQuery.post("typeaheadSource.php?q=" + query); // I tried both get and post
}
}
});
});
<div class="form-group">
<label class="control-label col-md-3">Job Number(s) </label>
<div class="col-md-8">
<select multiple="multiple" class="form-control tagsinput-typeahead" name="typeahead" id="typeahead" ></select>
</div>
</div>
这是我的 typeaheadSource.php:
if (isset($_REQUEST['q'])) {
$query = $_REQUEST['q'];
$sql = "SELECT jobno, jobname FROM jobs WHERE jobno LIKE '%" . $query . "%' ORDER BY jobno DESC LIMIT 20";
$result=db_query($sql);
while($row = db_nextrow($result)) {
$array[] = array('value' => $row['jobno'], 'text' => $row['jobname']);
}
if (isset($array)) {
echo json_encode($array);
}
}
如果我直接运行 typeaheadSource.php,输出如下所示:
[{"value":"2012006.00","text":"Monterey Hotel Investigation"},{"value":"2006142.00","text":"Ollendorff Residence"},{"value":"2006141.01","text":"MLK Student Union Peer Review Expanded Scope"},{"value":"2006141.00","text":"MLK Student Union Peer Review"}]
如果我获取该输出并将其作为源代码放入我的代码中,一切都会很好。
$('.tagsinput-typeahead').tagsinput({
confirmKeys: [13],
itemValue: 'value',
itemText: 'text',
typeahead: {
displayKey: 'text',
afterSelect: function(val) { this.$element.val(""); },
source: [{"value":"2012006.00","text":"Monterey Hotel Investigation"},{"value":"2006142.00","text":"Ollendorff Residence"},{"value":"2006141.01","text":"MLK Student Union Peer Review Expanded Scope"}]
}
});
但是当我的源代码调用我的远程 URL 时,预输入不会显示,我也没有收到任何错误。
source: function (query) {
return jQuery.get("typeaheadSource.php?q=" + query);
}
有没有人对如何使用远程 URL 查询 MySQL 数据库有任何建议或建议?
最佳答案
使用 jquery 自动完成如下
1- activete tagsinput <input type="text" value="" data-role="tagsinput" />
绑定(bind) jquery 自动完成 tagsinput 生成此类 bootstrap-tagsinput。
2-这是所需的代码
$(".bootstrap-tagsinput > input").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: url,
data: data,
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
}
});
}
});
- 添加所有引用文件 jquery,jquery custom.js 用于自动完成,自动完成 css,
关于jquery - 似乎无法让 tagsinput-typeahead 与远程 MySQL 源一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40965791/