web-dev-qa-db-fra.com

exemple d'utilisation de Twitter bootstrap typeahead ajax

J'essaie de trouver un exemple de travail de l'élément/ Twitter bootstrap typeahead qui fera un appel ajax pour remplir sa liste déroulante. 

J'ai un exemple de complétion automatique jquery en cours de travail 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 ceci en exemple 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];
                }
            );
       ..

Je vais attendre que le problème ' Ajout du support des sources distantes pour typeahead ' soit résolu.

jquerytwitter-bootstrapjquery-autocompletejquery-ui-autocompletetypeahead.js
270
emeraldjava

Edit: la typeahead n’est plus fournie dans Bootstrap 3. Check out:

À partir de Bootstrap 2.1.0 à 2.3.2, vous pouvez le faire:

$('.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 doivent être du bon type mime (application/json) pour que jQuery les reconnaisse comme JSON.

294
Stijn Van Bael

Vous pouvez utiliser le type BS Typeahead fork qui prend en charge les appels ajax . Vous pourrez alors écrire:

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

À 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.

69
Thantifaxath

Toutes les réponses font référence à la tête de frappe BootStrap 2, qui n’est plus présente dans BootStrap 3.

Pour tous ceux qui sont ici dirigés à la recherche d'un exemple AJAX à l'aide du nouveau post-Bootstrap Twitter typeahead.js , voici un exemple concret. La syntaxe est un peu différente:

$('#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);
      }
    });
  }
});

Cet exemple utilise à la fois une suggestion synchrone (l'appel à processSync) et asynchrone. Ainsi, certaines options apparaissent immédiatement, puis d'autres sont ajoutées. Vous pouvez simplement utiliser l'un ou l'autre.

Il existe de nombreux événements pouvant être liés et des options très puissantes, notamment utiliser des objets plutôt que des chaînes. Dans ce cas, vous utiliseriez votre propre fonction personnalisée display pour restituer vos éléments sous forme de texte.

43
Jonathan Lidbeck

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

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

Voici le repo de github: Ajax-Typeahead

24
Paul Warelis

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 le css suivant

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

Fonctionne parfaitement.

5
bmoers

J'utilise cette méthode

$('.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');
    }
});
3
Krava

Pour ceux qui recherchent une version coffeescript de la réponse acceptée

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options
2
Hendrik

J'ai parcouru ce post et tout ne voulait pas fonctionner correctement et j'ai finalement reconstitué les éléments à partir de quelques réponses. J'ai donc une démonstration à 100% et je vais le coller ici à titre de référence - collez-le dans un fichier php et assurez-vous qu'il est inclus. au bon endroit.

<?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>
2
l0ft13

On peut faire des appels en utilisant Bootstrap. La version actuelle ne présente aucun problème de mise à jour de source Problème de mise à jour de la source de données de Bootstrap avec post-response , C’est-à-dire que la source de bootstrap une fois mise à jour peut être modifiée à nouveau.

Veuillez vous référer à ci-dessous pour un exemple:

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,
});
2
neoeahit

UPDATE: J'ai modifié mon code en utilisant this fork 

aussi au lieu d'utiliser $ .each j'ai changé en $ .map comme suggéré par Tomislav Markovski

$('#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) {

    }
});

Cependant, je rencontre des problèmes en obtenant

Uncaught TypeError: Impossible d'appeler la méthode 'toLowerCase' de non définie

comme vous pouvez le voir sur un post plus récent, j'essaie de comprendre ici

espérons que cette mise à jour vous sera utile ...

1
mmoscosa

Essayez ceci si votre service ne renvoie pas le bon en-tête de type de contenu application/json:

$('.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);
        });
    }
});
1
Andres

si vous utilisez ajax, essayez $.getJSON() au lieu de $.get() si vous rencontrez des difficultés pour afficher correctement les résultats.

Dans mon cas, je n'ai eu que le premier caractère de chaque résultat lorsque j'ai utilisé $.get(), bien que j'ai utilisé json_encode() côté serveur.

0
larsbo

j'utilise $().one() pour résoudre ceci; Lorsque la page est chargée, j'envoie un ajax au serveur et j'attends son travail . Ensuite, le résultat est passé à function .$().one() est important .Parce que force typehead.js est associé à l'entrée une fois. désolé pour la mauvaise écriture.

(($) => {
    
    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 ?">

0
ali karimi

Je n'ai pas d'exemple de travail pour vous, ni de solution très propre, mais laissez-moi vous dire ce que j'ai trouvé.

Si vous regardez le code javascript de TypeAhead, il ressemble à ceci:

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

Ce code utilise la méthode "grep" jQuery pour faire correspondre un élément du tableau source. Je n'ai vu aucun endroit où vous pourriez prendre un appel AJAX, il n'y a donc pas de solution "propre" à cela.

Cependant, une façon quelque peu hacky que vous puissiez faire est de tirer parti du fonctionnement de la méthode grep dans jQuery. Le premier argument de grep est le tableau source et le second argument est une fonction utilisée pour faire correspondre le tableau source (notez que Bootstrap appelle le "matcher" que vous avez fourni lors de son initialisation). Ce que vous pouvez faire est de définir la source sur un tableau factice à un élément et de définir le matcher en tant que fonction avec un appel AJAX. De cette façon, il lancera l'appel AJAX une seule fois (car votre tableau source ne contient qu'un seul élément).

Cette solution n’est pas seulement hacky, mais elle souffrira de problèmes de performances puisque le code TypeAhead est conçu pour effectuer une recherche à chaque pression de touche (les appels AJAX ne doivent en réalité avoir lieu que toutes les quelques touches ou après un certain temps d’inactivité). Mon conseil est d'essayer, mais utilisez une autre bibliothèque de complétion automatique ou ne l'utilisez que dans des situations autres que AJAX si vous rencontrez des problèmes.

0
Aamer Abbas