我试图找到一个工作的twitter bootstrap typeahead元素的例子，将使ajax调用来填充它的下拉列表。
我有一个现有的工作jquery自动完成的例子，它定义了ajax url和如何处理回复
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { minChars:3, max:20 };
$("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
我需要改变什么来转换这到typeahead的例子?
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var options = { source:'/index/runnerfilter/format/html', items:5 };
$("#runnerquery").typeahead(options).result(
function(event, data, formatted)
{
window.location = "./runner/index/id/"+data[1];
}
);
..
我将等待“为typeahead添加远程源支持”问题得到解决。
我没有一个可行的例子，也没有一个非常清晰的解决方案，但让我告诉你我的发现。
如果你看一下TypeAhead的javascript代码，它是这样的:
items = $.grep(this.source, function (item) {
if (that.matcher(item)) return item
})
这段代码使用jQuery“grep”方法来匹配源数组中的元素。我没有看到任何可以在AJAX调用中挂钩的地方，所以没有一个“干净”的解决方案。
However, one somewhat hacky way that you can do this is to take advantage of the way the grep method works in jQuery. The first argument to grep is the source array and the second argument is a function that is used to match the source array (notice Bootstrap calls the "matcher" you provided when you initialized it). What you could do is set the source to a dummy one-element array and define the matcher as a function with an AJAX call in it. That way, it will run the AJAX call just once (since your source array only has one element in it).
这种解决方案不仅很棘手，而且还会出现性能问题，因为TypeAhead代码被设计为对每一次按键都进行查找(AJAX调用实际上应该只在每几次按键或在一定的空闲时间之后发生)。我的建议是尝试一下，但是坚持使用不同的自动补全库，或者如果遇到任何问题，只在非ajax的情况下使用它。
更新:我修改了我的代码使用这个分叉
也不是使用$。每一个我都换成了$。由托米斯拉夫·马可夫斯基推荐的地图
$('#manufacturer').typeahead({
source: function(typeahead, query){
$.ajax({
url: window.location.origin+"/bows/get_manufacturers.json",
type: "POST",
data: "",
dataType: "JSON",
async: false,
success: function(results){
var manufacturers = new Array;
$.map(results.data.manufacturers, function(data, item){
var group;
group = {
manufacturer_id: data.Manufacturer.id,
manufacturer: data.Manufacturer.manufacturer
};
manufacturers.push(group);
});
typeahead.process(manufacturers);
}
});
},
property: 'name',
items:11,
onselect: function (obj) {
}
});
然而，我遇到了一些问题
无法调用undefined的方法“toLowerCase”
正如你在一个新的帖子上看到的，我正在试图弄清楚
希望这个更新对你有任何帮助…
编辑:typeahead不再捆绑在Bootstrap 3中。查看:
在Bootstrap 3 RC 1中输入JavaScript模块在哪里?
typeahead.js
从Bootstrap 2.1.0到2.3.2，你可以这样做:
$('.typeahead').typeahead({
source: function (query, process) {
return $.get('/typeahead', { query: query }, function (data) {
return process(data.options);
});
}
});
像这样使用JSON数据:
{
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5"
]
}
注意JSON数据必须是正确的mime类型(application/ JSON)，这样jQuery才能将其识别为JSON。
从Bootstrap 2.1.0开始:
HTML:
<input type='text' class='ajax-typeahead' data-link='your-json-link' />
Javascript:
$('.ajax-typeahead').typeahead({
source: function(query, process) {
return $.ajax({
url: $(this)[0].$element[0].dataset.link,
type: 'get',
data: {query: query},
dataType: 'json',
success: function(json) {
return typeof json.options == 'undefined' ? false : process(json.options);
}
});
}
});
现在您可以创建统一的代码，在html代码中放置“json-request”链接。
可以使用Bootstrap进行调用。当前版本没有任何源代码更新问题
麻烦更新Bootstrap的输入前数据源与后响应
，也就是说，bootstrap的源代码一旦更新，就可以再次修改。
请参考下面的例子:
jQuery('#help').typeahead({
source : function(query, process) {
jQuery.ajax({
url : "urltobefetched",
type : 'GET',
data : {
"query" : query
},
dataType : 'json',
success : function(json) {
process(json);
}
});
},
minLength : 1,
});
我浏览了这篇文章，一切都不想正常工作，最终从几个答案拼凑在一起，所以我有一个100%的工作演示，并将它粘贴在这里作为参考-粘贴到一个php文件，并确保包含在正确的位置。
<?php if (isset($_GET['typeahead'])){
die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
source: function (query, process) {
return $.get('index.php?typeahead', { query: query }, function (data) {
return process(JSON.parse(data).options);
});
}
});
</script>
我正在用这个方法
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'options',
displayKey: 'value',
source: function (query, process) {
return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
var matches = [];
$.each(data, function(i, str) {
matches.push({ value: str });
});
return process(matches);
},'json');
}
});
所有的响应都引用BootStrap 2提前输入，这在BootStrap 3中不再存在。
对于在这里使用新的引导后Twitter typeahead.js寻找AJAX示例的其他人，这里有一个工作示例。语法有点不同:
$('#mytextquery').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
limit: 12,
async: true,
source: function (query, processSync, processAsync) {
processSync(['This suggestion appears immediately', 'This one too']);
return $.ajax({
url: "/ajax/myfilter.php",
type: 'GET',
data: {query: query},
dataType: 'json',
success: function (json) {
// in this example, json is simply an array of strings
return processAsync(json);
}
});
}
});
本例同时使用同步(对processSync的调用)和异步建议，因此您会看到一些选项立即出现，然后添加其他选项。你可以只用其中一个。
有许多可绑定的事件和一些非常强大的选项，包括使用对象而不是字符串，在这种情况下，您可以使用自己的自定义显示函数将项目呈现为文本。
$('#runnerquery').typeahead({
source: function (query, result) {
$.ajax({
url: "db.php",
data: 'query=' + query,
dataType: "json",
type: "POST",
success: function (data) {
result($.map(data, function (item) {
return item;
}));
}
});
},
updater: function (item) {
//selectedState = map[item].stateCode;
// Here u can obtain the selected suggestion from the list
alert(item);
}
});
//Db.php file
<?php
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn =new mysqli('localhost', 'root', '' , 'TableName');
$sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?");
$sql->bind_param("s",$search_param);
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$Resut[] = $row["name"];
}
echo json_encode($Result);
}
$conn->close();
?>
我使用$().one()
为了解决这个问题;
当页面加载，我发送ajax到服务器，等待完成。
然后将结果传递给函数。$().one()是重要的。因为强制typehead.js附加到输入一次。
很抱歉写得不好。
(($) => {
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)) {
matches.push(str);
}
});
cb(matches);
};
};
var states = [];
$.ajax({
url: 'https://baconipsum.com/api/?type=meat-and-filler',
type: 'get'
}).done(function(data) {
$('.typeahead').one().typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(data)
});
})
})(jQuery);
.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}
.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999;
}
.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
cursor: pointer;
}
.tt-suggestion:hover {
color: #f0f0f0;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<input class="typeahead" type="text" placeholder="where ?">
