2012-10-10 34 views
18

Me gustaría mostrar todos los artículos de Typeahead cuando la entrada de texto (id = "Preguntas") se enfoca. ¿Cómo puedo hacerlo?Bootstrap: mostrar todos los artículos de Typeahead en el foco

Javascript:

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

Así que, ¿cuál es tu pregunta? ¿Qué no funciona? –

+0

Hola John Funciona cuando comienzo a escribir, pero no solo en el enfoque. La idea es mostrar todas las opciones en foco. Leo estos artículos, pero no tengo éxito en las sugerencias: https://github.com/twitter/bootstrap/issues/2043 y https://github.com/twitter/bootstrap/pull/3941 – user1736062

+2

@JohnSaunders - Hola John, sobre los artículos anteriores, no entiendo cómo implementar este código: $ input.on ('focus', $ input.typeahead.bind ($ input, 'lookup'))); – user1736062

Respuesta

16

Obtenga el último complemento de arranque typeahead v2.1.2 en https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js

Esta actualización permitirá minLength de cero para que muestre todos 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"]  
        }); 

entonces usted tiene que adjuntar el evento onFocus a su elemento, porque no está definida por el plugin:

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

Es También es una buena idea sobreescribir la clase css de bootstrap typeahead localmente para establecer max-height y scroll vertical para los resultados en caso de que haya demasiados resultados.

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

Esto no parece funcionar (¿ya?) –

+1

No funciona en bootstrap-typeahead.js v2.3.1-j6 –

+1

Trabaja para mí (bootstrap-typeahead.js v2.3.2) pero cuando intento hacer clic en la barra de desplazamiento typeahead desaparecer. – Zabaa

0

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

showHintOnFocus:true 
+0

¿Cuál es la URL del proyecto? El enlace que veo el GitHub solo va a la versión 0.11: https://github.com/twitter/typeahead.js – raider33

+0

https://github.com/bassjobsen/Bootstrap-3-Typeahead –

0

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

se dará cuenta de que, según lo descrito por jharding:.

"typeahead.js está destinado a complementar cuadros de búsqueda que son alimentados por, para todos los efectos, un conjunto de datos de manera infinita El La funcionalidad propuesta aquí no es realmente una buena opción para lo que queremos que sea typeahead.js. . "

Aunque un mensaje previo de espectáculos caros cómo puede implementarlo

También puede ir para la versión más reciente https://github.com/bassjobsen/Bootstrap-3-Typeahead

0

Aquí está mi solución:

  • Init typeahead

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

  • evento disparador 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(''); 
    }); 
    
0

Para mí, el $ viewValue era nula de la selección que impedía la lista de visualización. 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"/> 
0

obtener la última versión (bootstrap3-typeahead.js v4.0.2) script desde Github:Download

código HTML:

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

JavaScript 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

Cuestiones relacionadas