web-dev-qa-db-fra.com

Bootstrap - affiche tous les éléments Typeahead sur le focus

J'aimerais afficher tous les éléments Typeahead lorsque la saisie de texte (id = "Questions") est activée . Comment puis-je le faire?

Javascript:

function SetTypeahead() {
    $("#Questions").typeahead({
        minLength: 0,
        source: [
                "Q1?",
                "Q2?",
                "Q3?",
                "@4?"
        ]
    });
}
twitter-bootstraptypeahead
19
user1736062

Procurez-vous le dernier plug-in de démarrage de typeahead v2.1.2 à https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js

Cette mise à jour permettra à minLength de zéro d’activer tout afficher pour typeahead

<input id="typeaheadField" name="typeaheadField" type="text" placeholder="Start Typing">

$("#typeaheadField").typeahead({
                        minLength: 0,
                        items: 9999,
                        source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado", "Oregon"]    
                    });

Ensuite, vous devez attacher l'événement onFocus à votre élément, car il n'est pas défini par le plugin: 

$("#typeaheadField").on('focus', $("#typeaheadField").typeahead.bind($("#typeaheadField"), 'lookup'));

il est également judicieux de remplacer localement la classe css de bootstrap typeahead afin de définir la hauteur maximale et le défilement vertical des résultats, au cas où il y aurait trop de résultats.

.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
16
user1893029

Pour moi, $ viewValue était nul lors de la sélection, ce qui empêchait l'affichage de la liste. Ma solution consistait à définir le filtre sur une chaîne vide lorsque $ viewValue était null.

<input type="text"
  ng-model="gear.Value"
  uib-typeahead="gear as gear.Name for gear in gears | filter:$viewValue || ''"
  typeahead-show-hint="true"
  typeahead-min-length="0"
  typeahead-show-hint="true"
  typeahead-editable='false'
  typeahead-focus-first='false'
  class="form-control"
  name="gear"
  ng-required="true"/>
2
user2325333

Il existe une solution à cela sur le bootstrap github: https://github.com/Twitter/bootstrap/pull/5063

Edit: Ce lien est mort, utilisez le lien que Andrew a posté: https://github.com/ptnplanet/Bootstrap-Better-Typeahead

1
DrCorduroy

Vérifiez cette demande de tirage à partir de le caractère de tête de théophraim , il a inclus cette fonctionnalité, mais elle n'a pas encore été fusionnée.

0
Tushkiz

TRAVAUX Pour bootstrap-3-typeahead, le plus simple est simplement de simuler un keyup avec backspace (chr8) au point.

$("#people_lookup").typeahead({
    source: people_list,
    minLength: 0
}).on('focus', function() {
    $(this).trigger(jQuery.Event('keyup', {which: 8}));
});
0
Paully

Il existe un problème fermé à ce sujet sur typeahead github au lien suivant: https://github.com/Twitter/typeahead.js/issues/462

Vous découvrirez que, comme décrit par jharding: 

"typeahead.js est destiné à compléter les champs de recherche alimentés par un ensemble de données infini. Le type de fonctionnalité proposé ici ne convient pas vraiment à ce que nous voulons que typeahead.js soit."

Bien qu'un message précédent par cher montre comment vous pouvez le mettre en œuvre.

Vous pouvez également choisir une version plus récente https://github.com/bassjobsen/Bootstrap-3-Typeahead

0
eton_ceb

La dernière version v3.1.0 de typeahead avait une option explicite

showHintOnFocus:true
0
Raúl Martín

Voici ma solution:

  • Tête d'initialisation

    $ ("# FinalGrades", contexte) .typeahead ({ MinLength: 0, Éléments: 10, ScrollBar: true, Source: finalGrades });

  • Déclencher un événement de zone de texte

    $("#FinalGrades", context).on("keyup focus", function (e) {
    var that = $(this);
    if (that.val().length > 0 || e.keyCode == 40 || e.keyCode == 38) return;
    that.select();
    var dropDown = that.next('.dropdown-menu');
    dropDown.empty();
    $("#FinalGrades", context).val(qualificationNames[0]);
    that.trigger('keyup');
    $.each(finalGrades, function (index, value) {
        var item = '<li data-value="' + value + '" class=""><a href="#">' + value + '</a></li>';
        dropDown.append(item);
    });
    that.val('');
});
0
user1796655