Llamada Ajax poblar Typeahead Bootstrap

Lo que estoy tratando de hacer es obtener un objeto json a través de Ajax y rellenar el Bootstrap Typeahead con un solo tipo de valor.

Aquí está mi código:

nameTypeHead: function () { var _self = this, searchInput = $('#nameTypeHead'), arr = []; function getArray() { $.ajax({ url: '/Home/AutoComplete', type: 'post', dataType: 'json', data: { searchText: searchInput.val() }, success: function (data) { $.each(data, function () { arr.push(this.Name); }); return arr; } }); } searchInput.typeahead({ source: getArray() }); } 

Recibo el error que arr es nulo

También probé con .parseJSON() pero sin éxito:

 $.each($.parseJSON(data), function () { arr.push(this.Name); }); 

¿Qué puedo hacer para mostrar solo el valor Nombre de mi objeto Json en Typeahed?

Si en el Ajax Success pongo alert(JSON.stringify(data)); alerta correctamente mi objeto Json.

Lo hice desde cero:

 $('#typeahead').typeahead({ source: function (query, process) { return $.getJSON( 'path/to/lookup', { query: query }, function (data) { return process(data); }); } }); 

Donde los data son una simple matriz JSON como:

  [ "John", "Jane", "Alfredo", "Giovanni", "Superman" ] 

Si la matriz de data tiene una estructura diferente, simplemente reorganícela antes de pasarla al método process() .

Puedes encontrar un ejemplo vivo aquí .

EDITAR – basado en sus datos json:

 [ {'id':'0', 'name':'John'}, {'id':'1', 'name':'Jane'}, {'id':'2', 'name':'Alfredo'}, ... } 

La getJSON llamada getJSON convierte en:

 function (data) { var newData = []; $.each(data, function(){ newData.push(this.name); }); return process(newData); }); 

Echa un vistazo a esta esencia. Hace autocompletar, trata con tipificadores rápidos y cachés

https://gist.github.com/mrgcohen/5062352

Esto es lo que funcionó para mí:

Configuración de HTML:

   

Javascript:

 /* example remote-data-source [ { id:1, name:'Batman' },{ id:2, name:'Superman' } ] */ $('#my-typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'myDataset', source: function(str, sync, async) { // abstracting out the "REST call and processing" in a seperate function restCall(str, async); }, templates: { suggestion: function(user) { return '
' + user.name + '
'; }, pending: '
Please wait...
' } }); // The function that will make the REST call and return the data function restCall(str, async) { return $.ajax('http://url-for-remote-data-source/query?name=' + str, { // headers and other setting you wish to set-up headers: { 'Content-Type': 'application/json', }, // response success: function(res) { //processing data on response with 'async' return async(res.data); } }); }

Referencias:

Typeahead Docs - Datasets : https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#datasets

Jquery **$.ajax()** : https://api.jquery.com/jquery.ajax/

Buena suerte.