Ejemplo de ajax de escritura anticipada de Twitter Bootstrap
Estoy tratando de encontrar un ejemplo funcional del elemento de escritura anticipada de arranque de Twitter que realizará una llamada ajax para completar su menú desplegable.
Tengo un ejemplo de autocompletar de jquery en funcionamiento que define la URL de ajax y cómo procesar la respuesta.
<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];
}
);
..
¿Qué necesito cambiar para convertir esto al ejemplo de escritura anticipada?
<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];
}
);
..
Voy a esperar a que se resuelva el problema " Agregar compatibilidad con fuentes remotas para escritura anticipada ".
Editar: la escritura anticipada ya no está incluida en Bootstrap 3. Consulte:
- ¿Dónde está el módulo JavaScript de escritura anticipada en Bootstrap 3 RC 1?
- escribirahead.js
A partir de Bootstrap 2.1.0 hasta 2.3.2, puedes hacer esto:
$('.typeahead').typeahead({
source: function (query, process) {
return $.get('/typeahead', { query: query }, function (data) {
return process(data.options);
});
}
});
Para consumir datos JSON como este:
{
"options": [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5"
]
}
Tenga en cuenta que los datos JSON deben ser del tipo mime correcto (aplicación/json) para que jQuery los reconozca como JSON.
Puede utilizar la bifurcación BS Typeahead que admite llamadas ajax. Entonces podrás escribir:
$('.typeahead').typeahead({
source: function (typeahead, query) {
return $.get('/typeahead', { query: query }, function (data) {
return typeahead.process(data);
});
}
});
