twitter bootstrap typeahead ajax exemple

Question

J'essaie de trouver un exemple de travail de twitter bootstrap typeahead élément qui va faire un appel ajax pour remplir la liste déroulante.

J'ai déjà un travail jquery autocomplete exemple qui définit l'url ajax et comment traiter la réponse

<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];
                }
            );
       ..

De quoi ai-je besoin de changement pour convertir ce pour la typeahead exemple?

<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];
                }
            );
       ..

Je vais attendre pour le"Ajouter à distance des sources de soutien pour typeahead' problème soit résolu.

Answer 1

Edit: typeahead n'est plus incorporé dans le Bootstrap 3. Découvrez:

• Où est le typeahead javascript module dans le bootstrap 3 RC 1?
• typeahead.js

Comme de 2.1.0 Bootstrap jusqu'à 2.3.2, vous pouvez faire ceci:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            return process(data.options);
        });
    }
});

Pour utiliser les données JSON comme ceci:

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

Notez que les données JSON doit être de type mime application/json) afin de jQuery, il reconnaît que JSON.

Answer 2

Vous pouvez utiliser la fourche BS Typeahead qui prend en charge les appels ajax. Ensuite, vous serez capable d'écrire:

 $('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});
 

Answer 3

À partir de 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);
            }
        });
    }
});
 

Vous pouvez maintenant créer un code unifié en plaçant des liens "json-request" dans votre code HTML.

Answer 4

J'ai augmenté le plugin Bootstrap typeahead original avec des capacités ajax. Très facile à utiliser:

 $("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});
 

Voici le repo de github: Ajax-Typeahead

Answer 5

J'ai fait quelques modifications sur le 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")`
 

et ajouter les css suivants

 .dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}
 

Fonctionne parfaitement.