web-dev-qa-db-fra.com

Twitter Typeahead.js: affiche toutes les options lorsque vous cliquez/concentrez

J'utilise Typeahead.js dans une saisie de texte à complétion automatique, et c'est génial. Mais je dois activer le menu déroulant avec toutes les options disponibles lorsque l'entrée devient active. Toutes les solutions possibles que j'ai vues impliquent d'initialiser l'entrée avec une valeur, mais je dois montrer tout les options.

Comment pourrais-je y parvenir?

javascripttwitter-bootstrap-3typeahead.js
29
César García Tapia

Vous devez utiliser l'option minLength: 0

Remarque:

Il y a une requête d'extraction qui a résolu ce problème.

14
César García Tapia

Toute réponse indiquant "minLength: 0 est tout ce dont vous avez besoin" n'est pas vraie.

"Out of the Box" Typeahead v0.11.1 'a besoin de' minLength défini sur 0, mais AUSSI si vous utilisez le moteur Bloodhound prêt à l'emploi, vous devez être sûr de le définir.

identify: function(obj) { return obj.team; },

sur votre objet Bloodhound .. 

Vous avez également besoin d’une fonction "intermédiaire" pour traiter votre "requête vide", c’est là que vous direz à Bloodhound de coopérer.

function nflTeamsWithDefaults(q, sync) {
  if (q === '') {
    sync(nflTeams.all()); // This is the only change needed to get 'ALL' items as the defaults
  } else {
    nflTeams.search(q, sync);
  }
}

Vous pouvez voir l'exemple complet ici.

var nflTeams = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  identify: function(obj) { return obj.team; },
  prefetch: '../data/nfl.json'
});

function nflTeamsWithDefaults(q, sync) {
  if (q === '') {
    sync(nflTeams.all()); // This is the only change needed to get 'ALL' items as the defaults
  }

  else {
    nflTeams.search(q, sync);
  }
}

$('#default-suggestions .typeahead').typeahead({
  minLength: 0,
  highlight: true
},
{
  name: 'nfl-teams',
  display: 'team',
  source: nflTeamsWithDefaults
});

PLUS PARTICULIÈREMENT, VOUS POUVEZ VOIR LA SUGGESTION OFFICIELLE SUGGESTION DE TYPEAHEAD Twitter SUR FOCUS. EXEMPLE AT DE L’ADRESSE SUIVANTE, AVEC LE SIMPLE CHANGEMENT DE .get () À .all () (VOIR AU-DESSUS OR PLUS BAS)

http://Twitter.github.io/typeahead.js/examples/#default-suggestions

... espérons que cela aidera quelqu'un, car il m'a fallu un certain temps pour trouver cette information (je l'ai trouvée en suivant tous les rapports de bogues et en essayant de trouver la méthode .all ()) ...

19
NinjaKC

J'ai apporté une modification rapide à la version 10.2 qui donnait l'exemple "les bases" trouvé ici display on focus.

j'ai changé le mixin _onFocus (ligne 1459) DE:

_onFocused: function onFocused() {
    this.isActivated = true;
    this.dropdown.open();
},

À:

_onFocused: function onFocused() {
    this.isActivated = true;
    var val = this.input.getInputValue(); 
    var query = Input.normalizeQuery(val);
    this.dropdown.update(query);
    this.dropdown.open();
},

Ce n'est pas officiel, mais le travail est fait.

11
Scottie

Il existe un moyen plus simple de le faire maintenant sans modifier le source. La source a peut-être changé depuis la réponse initiale à cette question, mais j’ai pensé que cela valait la peine de la mettre ici au cas où.

Après avoir créé la tête de frappe:

var $element = $('#myTextElement');
$element.typeahead({ source: ['Billy', 'Brenda', 'Brian', 'Bobby'] });

Il suffit de définir la longueur minimale sur 0:

$element.data('typeahead').options.minLength = 0;

Les options minLength sont forcées à 1 lorsque la tête de frappe est créée, mais vous pouvez le définir après la création et cela fonctionnera parfaitement.

2
Robert

Il existe un moyen de le faire maintenant sans avoir à modifier le fichier source typeahead . Vous devez faire deux choses: définir minlength sur 0 et ajouter un gestionnaire d'événement pour l'événement focus: Dans l'exemple ci-dessous, J'ai copié le premier exemple sur la page Twitter ( https://Twitter.github.io/typeahead.js/examples/ ) - assurez-vous que l'emplacement de typeahead.js et de jquery-ui.js est correct.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="typeahead.js"></script>
<script src="jquery-ui.js"></script>
   <script>
   $(function(){
var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substrRegex;

    // 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)) {
        // the typeahead jQuery plugin expects suggestions to a
        // JavaScript object, refer to typeahead docs for more info
        matches.Push({ value: str });
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 0
},
{
  name: 'states',
  displayKey: 'value',
  source: substringMatcher(states)
});
 $('.typeahead').on( 'focus', function() {
          if($(this).val() === '') // you can also check for minLength
              $(this).data().ttTypeahead.input.trigger('queryChanged', '');
      });
});
   </script>
    </head>
<body>
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

</body>
</html>

Vérifié cela fonctionne avec 0.10.5. Remarque: cela ne fonctionne pas avec le moteur de recherche Bloodhound, car queryTokenizer for Bloodhound attend un personnage.

2
vanval

Utiliser 0.10.4 

Pour renvoyer tous les résultats de la requête vide, ajoutez ce qui suit à la ligne 450 de bloodhound.js

     if (query == "") { return that.datums; }

Pour déclencher la correspondance lors de la mise au point, déclenchez l'événement touche vers le bas sur votre entrée lorsque la mise au point est effectuée.

     $(input_element).on("click", function () {
        ev = $.Event("keydown")
        ev.keyCode = ev.which = 40
        $(this).trigger(ev)
        return true
    });
2
Josh Dean

Dans typeahead v.0.11.1, le correctif référencé dans d'autres réponses a été appliqué. Vous pouvez y parvenir avec l'option:

minLength: 0

Fonctionne sur le clavier ou la souris. Aucun changement de code ou de nouveaux événements nécessaires.

1
Jonathan Lidbeck

Une autre option consiste à utiliser les API non publiques de Typeahead. L'objet Typeahead complet est disponible via la méthode data de jQuery.

var _typeaheadElem = $('#myInput').find('.typeahead');
var _typeahead = _typeaheadElem.data('ttTypeahead');

_typeaheadElem.focus(function() {
    /* WARNING: This is hackery abusing non-public Typeahead APIs */
    if (_typeaheadElem.val() === "") {
        var input = _typeahead.input; //Reference to the TA Input class
        //Set the component's current query to something !== input.
        input.query = "Recent People";
        input._onInput("");
    }
});

Voir plus de code fonctionnant dans v0.10.2 http://Pastebin.com/adWHFupF

Ceci est lié au PR 719 https://github.com/Twitter/typeahead.js/pull/719

0
Snekse