twitter bootstrap - suggestion - Bootstrap-muestra todos los elementos de Typeahead en foco

typeahead states

Question

Me gustaría mostrar todos los elementos de Typeahead cuando la entrada de texto (id = "Preguntas") se enfoca. ¿Cómo puedo hacerlo?

Javascript:

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

Answer 1

Aquí está mi solución:

• Init typeahead

  $ ("# FinalGrades", contexto) .typeahead ({minLength: 0, items: 10, scrollBar: true, source: finalGrades});

• Trigger evento de cuadro de texto

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

Answer 2

Hay un problema cerrado al respecto en typeahead github en el siguiente enlace: https://github.com/twitter/typeahead.js/issues/462

Descubrirás que, como lo describe jharding:

"typeahead.js está destinado a complementar los cuadros de búsqueda que funcionan con, para todos los efectos, un conjunto de datos infinito. El tipo de funcionalidad que se propone aquí no es realmente un gran ajuste para lo que queremos que sea typeahead.js".

Aunque un mensaje anterior por caro muestra cómo puede implementarlo.

También puede ir a la versión más reciente Bootstrap-3-Typeahead

Answer 3

Hay una solución a esto en el github bootstrap: https://github.com/twitter/bootstrap/pull/5063

Edición: ese enlace está muerto, use el enlace que Andrew publicó: https://github.com/ptnplanet/Bootstrap-Better-Typeahead

Answer 4

La última versión v3.1.0 de typeahead tenía una opción explícita

showHintOnFocus:true

Answer 5

Obtenga la última versión de pluginhead plugin v2.1.2 en https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js js/bootstrap-typeahead.js

Esta actualización permitirá que minLength of zero habilite show all para 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"]    
                    });

Luego, debe adjuntar el evento onFocus a su elemento, porque no está definido por el complemento:

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

También es una buena idea sobrescribir la clase css de bootstrap typeahead localmente para establecer la altura máxima y el desplazamiento vertical para los resultados en caso de que haya demasiados resultados.

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

Answer 6

Para mí, $ viewValue era nulo en la selección, lo que impedía que se mostrara la lista. Mi solución fue establecer el filtro en una cadena vacía cuando $ viewValue era nulo.

<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"/>

Answer 7

TRABAJOS Para bootstrap-3-typeahead, lo más fácil es simular un keyup con retroceso (chr8) enfocado.

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

Answer 8

Verifique esta solicitud de extracción desde la cabecera de escritura de theophraim , él ha incluido esta funcionalidad, pero aún no se ha fusionado.

Answer 9

Obtenga la última versión ( bootstrap3-typeahead.js v4.0.2 ) del script de Github: Download

Código HTML:

<input data-provide="typeahead" id="q" type="text" value="" />

JavaScript de trabajo:

// autocomplete input text
$(''#q'').typeahead({
    // your json data source
    source: [your json or object here],
    // on click list option set as text value
    autoSelect: true,
    // set minlength 0 to show list on focus
    minLength: 0,
    // set no of items you want here
    items: 20,
    // set true if want to list option on focus
    showHintOnFocus: true
});

Documento oficial: Bootstrap-3-Typeahead