jQuery twitter bootstrap typeahead ajax 示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9232748/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap typeahead ajax example
提问by emeraldjava
I'm trying to find a working example of the twitter bootstrap typeaheadelement that will make an ajax call to populate it's dropdown.
我正在尝试找到一个twitter bootstrap typeahead元素的工作示例，该元素将进行 ajax 调用以填充它的下拉列表。
I have an existing working jquery autocomplete example which defines the ajax url to and how to process the reply
我有一个现有的工作 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];
}
);
..
What do i need change to convert this to the typeahead example?
我需要更改什么才能将其转换为预先输入的示例？
<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];
}
);
..
I'm going to wait for the 'Add remote sources support for typeahead' issue to be resolved.
我将等待“为提前输入添加远程源支持”问题得到解决。
回答by Stijn Van Bael
Edit: typeahead is no longer bundled in Bootstrap 3. Check out:
编辑：Bootstrap 3 中不再捆绑 typeahead。请查看：
As of Bootstrap 2.1.0 up to 2.3.2, you can do this:
从 Bootstrap 2.1.0 到 2.3.2，你可以这样做：
$('.typeahead').typeahead({
source: function (query, process) {
return $.get('/typeahead', { query: query }, function (data) {
return process(data.options);
});
}
});
To consume JSON data like this:
要像这样使用 JSON 数据：
{
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5"
]
}
Note that the JSON data must be of the right mime type (application/json) so jQuery recognizes it as JSON.
请注意，JSON 数据必须是正确的 mime 类型 (application/json)，以便 jQuery 将其识别为 JSON。
回答by bogert
You can use the BS Typeahead forkwhich supports ajax calls. Then you will be able to write:
您可以使用支持 ajax 调用的BS Typeahead fork。然后你就可以写：
$('.typeahead').typeahead({
source: function (typeahead, query) {
return $.get('/typeahead', { query: query }, function (data) {
return typeahead.process(data);
});
}
});
回答by Thantifaxath
Starting from Bootstrap 2.1.0:
从 Bootstrap 2.1.0 开始：
HTML:
HTML：
<input type='text' class='ajax-typeahead' data-link='your-json-link' />
Javascript:
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);
}
});
}
});
Now you can make a unified code, placing "json-request" links in your HTML-code.
现在你可以制作一个统一的代码，在你的 HTML 代码中放置“json-request”链接。
回答by Jonathan Lidbeck
All of the responses refer to BootStrap 2 typeahead, which is no longer present in BootStrap 3.
所有响应都参考 BootStrap 2 typeahead，它不再出现在 BootStrap 3 中。
For anyone else directed here looking for an AJAX example using the new post-Bootstrap Twitter typeahead.js, here's a working example. The syntax is a little different:
对于在这里使用新的 post-Bootstrap 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);
}
});
}
});
This example uses both synchronous (the call to processSync) and asynchronous suggestion, so you'd see some options appear immediately, then others are added. You can just use one or the other.
此示例同时使用同步（对processSync的调用）和异步建议，因此您会看到一些选项立即出现，然后添加了其他选项。您可以只使用其中一种。
There are lots of bindable events and some very powerful options, including working with objects rather than strings, in which case you'd use your own custom displayfunction to render your items as text.
有许多可绑定事件和一些非常强大的选项，包括使用对象而不是字符串，在这种情况下，您可以使用自己的自定义显示功能将您的项目呈现为文本。
回答by Paul Warelis
I've augmented the original typeahead Bootstrap plugin with ajax capabilities. Very easy to use:
我已经使用 ajax 功能增强了原始的 typeahead Bootstrap 插件。非常容易使用：
$("#ajax-typeahead").typeahead({
ajax: "/path/to/source"
});
Here's the github repo: Ajax-Typeahead
这是 github 存储库：Ajax-Typeahead
回答by bmoers
I did some modifications on the jquery-ui.min.js:
我对 jquery-ui.min.js 做了一些修改：
//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...
// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....
// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`
and add following css
并添加以下css
.dropdown-menu {
max-width: 920px;
}
.ui-menu-item {
cursor: pointer;
}
Works perfect.
工作完美。
回答by Krava
I am using this method
我正在使用这种方法
$('.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');
}
});
回答by Hendrik
To those looking for a coffeescript version of the accepted answer:
对于那些正在寻找已接受答案的咖啡脚本版本的人：
$(".typeahead").typeahead source: (query, process) ->
$.get "/typeahead",
query: query
, (data) ->
process data.options
回答by l0ft13
I went through this post and everything didnt want to work correctly and eventually pieced the bits together from a few answers so I have a 100% working demo and will paste it here for reference - paste this into a php file and make sure includes are in the right place.
我浏览了这篇文章，但一切都不想正常工作，最终从几个答案中拼凑起来，所以我有一个 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>
回答by neoeahit
One can make calls by using Bootstrap. The current version does not has any source update issues Trouble updating Bootstrap's typeahead data-source with post response, i.e. the source of bootstrap once updated can be again modified.
可以使用 Bootstrap 进行调用。当前版本没有任何源更新问题 无法 使用 post response 更新 Bootstrap 的 typeahead 数据源，即 bootstrap 的源一旦更新可以再次修改。
Please refer to below for an example:
请参考以下示例：
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,
});
