twitter引导键入ajax示例
我试图find一个工作示例的twitter引导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中的typeahead 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数据必须是正确的MIMEtypes（application / json），所以jQuery将其识别为JSON。
您可以使用支持ajax调用的BS Typeahead分叉 。 那么你将能够写：
$('.typeahead').typeahead({ source: function (typeahead, query) { return $.get('/typeahead', { query: query }, function (data) { return typeahead.process(data); }); } });
从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 2的先头文件，BootStrap 3中不再存在该文件。
对于这里的其他人来说，使用新的后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); } }); } });
这个例子同时使用同步（调用processSync ）和asynchronousbuild议，所以你会看到一些选项立即出现，然后添加其他选项。 你可以使用一个或另一个。
有很多可绑定的事件和一些非常强大的选项，包括使用对象而不是string，在这种情况下，您将使用自己的自定义显示function将项目呈现为文本。
我用ajaxfunction增强了原始的带引导的Bootstrap插件。 非常容易使用：
$("#ajax-typeahead").typeahead({ ajax: "/path/to/source" });
这里是github回购： Ajax-Typeahead
我对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")`
并添加以下的CSS
.dropdown-menu { max-width: 920px; } .ui-menu-item { cursor: pointer; }
完美的作品。
对于那些正在寻找接受的答案咖啡脚本版本：
$(".typeahead").typeahead source: (query, process) -> $.get "/typeahead", query: query , (data) -> process data.options
我经历了这个post，一切都不想正常工作，最终从几个答案拼凑在一起，所以我有一个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'); } });
更新：我修改我的代码使用这个叉子
而不是使用$。每个我改变为$ .map由Tomislav马尔可夫斯基build议
$('#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) { } });
但是我遇到了一些问题
Uncaught TypeError：不能调用未定义的方法“toLowerCase”
正如你可以看到一个新的职位，我想在这里弄清楚
希望这个更新对你有所帮助
可以使用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, });
如果你的服务没有返回正确的application / json内容types头文件，试试这个：
$('.typeahead').typeahead({ source: function (query, process) { return $.get('/typeahead', { query: query }, function (data) { var json = JSON.parse(data); // string to json return process(json.options); }); } });
我没有一个工作的例子，也没有一个非常干净的解决scheme，但让我告诉你我find了什么。
如果你看看TypeAhead的JavaScript代码，它看起来像这样：
items = $.grep(this.source, function (item) { if (that.matcher(item)) return item })
此代码使用jQuery“grep”方法来匹配源数组中的元素。 我没有看到任何你可以挂在AJAX调用的地方，所以没有一个“干净”的解决scheme。
然而，你可以这样做的一个有点怪异的方式是利用grep方法在jQuery中的工作方式。 grep的第一个参数是源数组，第二个参数是一个用于匹配源数组的函数（注意Bootstrap调用您在初始化时提供的“匹配器”）。 你可以做的是将源设置为一个虚拟的单元素数组，并将匹配器定义为带有AJAX调用的函数。 这样，它只会运行一次AJAX调用（因为你的源数组只有一个元素）。
这个解决scheme不仅是个黑客，而且由于TypeAhead代码被devise用来在每个按键上进行查找（AJAX调用实际上只发生在每一个按键或者一定的空闲时间之后），所以它会受到性能问题的困扰。 我的build议是尝试一下，但坚持使用不同的自动完成库，或者只有在遇到任何问题时才将其用于非AJAX情况。
当使用ajax时，如果您在正确显示结果时遇到问题，请尝试$.getJSON()而不是$.get() 。
在我的情况下，我只有每个结果的第一个字符时，我使用$.get() ，虽然我用json_encode()服务器端。
