Uso de TypeAhead con jQuery y Bootstrap 2.1

Question

En la versión 2.1 of Twitter Bootstrap, la capacidad de pasar una función de devolución de llamada en las opciones de Typeahead was added. Sin embargo, he estado teniendo dificultades para hacer que esto funcione con una llamada jQuery ajax.

Esto es lo que tengo hasta ahora.

HTML

<form class="form-horizontal" action=""> 
    <fieldset> 
     <div class="control-group"> 
      <label class="control-label" for="myTypeahead">User</label> 
      <div class="controls"> 
       <input type="text" id="myTypeahead" /> 
      </div> 
     </div> 
    </fieldset> 
</form> 

JavaScript (establecido en la función jQuery $(document).ready)

$("#myTypeahead").typeahead({ 
    source: function (query, process) { 
    $.ajax({ 
     type: "POST", 
     url: ServiceURL + "/FindUsers", 
     data: "{ SearchText: '" + query + "' }", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (r1) { 
     var users = []; 
     if (r1.d.Records) { 
      $(r1.d.Records).each(function (index, val) { 
      users.push(val.User.Name); 
      }); 
      console.log(users); 
      process(users); 
     } 
     } 
    }); 
    } 
}); 

Cuando escribo test (o Test) en la entrada TYPEAHEAD, no se muestran los resultados TYPEAHEAD , pero los datos que se registran desde la variable users se ven así:

["Test User A", "Test User B", "Test User C", "Test User D", "Test User E", "Test User F"] 

¿Por qué no funcionaría?

También, como referencia, aquí está el Typeahead JavaScript for Bootstrap.

Answer 1

Me di cuenta. El formulario HTML (enumerado en la pregunta) se mostró en un cuadro de diálogo modal, y el resultado de Typeahead div apareció detrás del cuadro de diálogo modal.

Resulta que los resultados fueron devueltos y mostrados, pero el contenedor de resultados anticipados simplemente no estaba visible.

Para solucionarlo, he añadido este CSS:

.typeahead { 
    z-index: 1100; 
} 

Answer 2

El índice z funciona en la versión 2.3.1 de arranque, pero los menús TYPEAHEAD obtener aún así obtener cortada si se extienden más allá de las fronteras de la diálogo en cualquier dirección.

Como una solución, anadir este CSS después de la carga bootstrap.css:

/* Fix for Bootstrap dialog typeahead cut-off */ 
.modal-body { 
    overflow: visible; 
} 

Answer 3

$('#activity').typeahead({ 
         itemSelected:function(data,value,text){ 
          console.log(data) 
          alert('value is'+value); 
          alert('text is'+text); 
         },              
         ajax: { 
          url: "/path/to/destination", 
          timeout: 500, 
          displayField: "activity", 
          triggerLength: 2, 
          method: "get", 
          loadingClass: "loading-circle", 
          preDispatch: function (query) { 
           //showLoadingMask(true); 
           return { 
            search: query 
           } 
          }, 
          preProcess: function (data) { 
           //showLoadingMask(false); 
           if (data.success === false) { 
            // Hide the list, there was some error 
            return false; 
           } 
           // We good!    
           return data.mylist; 
          } 
         } 
}); 

Usted puede utilizar el código anterior para hacer el trabajo typehead. Asegúrese de que está devolviendo los datos JSON en el siguiente formato data.miller debe estar allí para trabajar con el código anterior.