Suggestions de typeahead de Bootstrap remplacées lors de la navigation

Question

J'utilise Bootstrap Typeahead pour suggérer certains résultats de recherche. Les résultats sont renvoyés par une ressource ajax, et comme cette ressource crée un délai, j'ai un effet malheureux.

Exemple : Si je tape un mot de 4 lettres, les suggestions apparaissent après 2 lettres, je peux alors parcourir les résultats avec les touches haut/bas, mais soudain les suggestions se rechargent parce que la dernière requête est terminée.

Existe-t-il un moyen d'annuler les suggestions restantes si l'utilisateur utilise les touches haut/bas pour parcourir les suggestions ?

('#query').typeahead({
        items: 4,
        source: function (query,process) {

            map = {};
            $.getJSON('/app_dev.php/ajax/autosuggest/'+query, function (data) {
                vehicles = [];
                $.each(data, function(i,vehicle){
                    map[vehicle.full] = vehicle;
                    vehicles.push(vehicle.full);
                });
                process(vehicles);
            });
        },
        updater: function (item) {
            // do something here when item is selected
        },
        highlighter: function (item) {
            return item;
        },
        matcher: function (item) {
            return true;
        }
    });

Answer 1

I penser ce qui suit répondra à vos besoins (il est difficile de le reproduire exactement) :

Il n'existe pas de moyen simple d'interrompre une réponse différée, mais vous pouvez étendre typeahead comme je l'ai constaté ici (sans modifier bootstrap.js)

L'idée est d'attraper keydown détecter si l'événement est KEY_UP o KEY_DOWN , mettre un drapeau is_browsing puis interrompre la procédure process si is_browsing est vrai (c'est-à-dire si l'utilisateur a frappé KEY_UP o KEY_DOWN et aucune autre touche par la suite).

Extension de l'avance de type :

// save the original function object
var _superTypeahead = $.fn.typeahead;

// add is_browsing as a new flag
$.extend( _superTypeahead.defaults, {
    is_browsing: false
});

// create a new constructor
var Typeahead = function(element, options) {
    _superTypeahead.Constructor.apply( this, arguments )
}

// extend prototype and add a _super function
Typeahead.prototype = $.extend({}, _superTypeahead.Constructor.prototype, {
    constructor: Typeahead

    , _super: function() {
        var args = $.makeArray(arguments)
        // call bootstrap core
        _superTypeahead.Constructor.prototype[args.shift()].apply(this, args)
    }

    //override typeahead original keydown
  , keydown: function (e) {
      this._super('keydown', e)
      this.options.is_browsing = ($.inArray(e.keyCode, [40,38])>-1)
    }

    //override process, abort if user is browsing
  , process: function (items) {
      if (this.options.is_browsing) return
      this._super('process', items)
    }

});

// override the old initialization with the new constructor
$.fn.typeahead = $.extend(function(option) {
    var args = $.makeArray(arguments),
    option = args.shift()

    // this is executed everytime element.modal() is called
    return this.each(function() {
        var $this = $(this)
        var data = $this.data('typeahead'),
            options = $.extend({}, _superTypeahead.defaults, $this.data(), typeof option == 'object' && option)

        if (!data) {
            $this.data('typeahead', (data = new Typeahead(this, options)))
        }
        if (typeof option == 'string') {
            data[option].apply( data, args )
        }
    });
}, $.fn.typeahead);

Ce type d'extension peut être placé n'importe où, par exemple dans un <script type="text/javascript"> -Section

Test de l'extension :

<input type="text" id="test" name="test" placeholder="type some text" data-provide="typeahead">
<script type="text/javascript">
$(document).ready(function() {
    var url='typeahead.php';
    $("#test").typeahead({
        items : 10,
        source: function (query, process) {
            return $.get(url, {  query: query }, function (data) {
                return process(data.options);
            });
        }
    });
});
</script>

Un script PHP script "côté serveur" qui renvoie un grand nombre d'options aléatoires avec un délai forcé, typeahead.php :

<?
header('Content-type: application/json');
$JSON='';
sleep(3); //delay execution in 3 secs
for ($count=0;$count<30000;$count++) {
    if ($JSON!='') $JSON.=',';
    //create random strings
    $s=str_shuffle("abcdefghijklmnopq");
    $JSON.='"'.$s.'"';
}
$JSON='{ "options": ['.$JSON.'] }';
echo $JSON;
?>

Cela semble vraiment fonctionner pour moi. Mais je ne peux pas être sûr qu'elle fonctionnera dans votre cas. Faites-moi savoir si vous avez réussi ou non.