我试图找到一个工作的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不再捆绑在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进行调用。当前版本没有任何源代码更新问题
麻烦更新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,
});
所有的响应都引用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的调用)和异步建议，因此您会看到一些选项立即出现，然后添加其他选项。你可以只用其中一个。
有许多可绑定的事件和一些非常强大的选项，包括使用对象而不是字符串，在这种情况下，您可以使用自己的自定义显示函数将项目呈现为文本。
我使用$().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 ?">
我正在用这个方法
$('.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');
}
});
