Typeahead.js using array object, reloading source on every onkeyup

Question

I´m trying to use typeahead for making a complex query easier to process. So the idea is to use typeahead to show a list of options and when one is choosen, set the input with the label of the choosen item and set an input hidden with the id of that item. There is an other situation to be resolved, every time a letter is enter, the source of typeahead change, cause these fields got 40000 options aprox., so the service used got a top 10 filter.

html code:

<div id="bloodhound" class="col-sm-7">
                      <input class="typeahead" type="text" id="iCliente" onkeyup="actualizarArray();">                      
</div>
<input type="hidden" id="selectedId">

script code:

function actualizarArray()
    {
        var clientesProcesados;

        $('#bloodhound .typeahead').typeahead('destroy');

        var urlTypeahead = 'http://localhost:8082/contratantes/search/findTop10ByNombreContaining?nombre=' + $('#iCliente').val();

        $.ajax({
            url: urlTypeahead,
            type: "GET",
            dataType: 'json',
            success: function (data){
                //alert('entro');
                //TODO procesar JSON para que bloodhound lo pueda levantar
                var arrayClientes = data._embedded.contratantes;
                var arrayClientesProcesados = [];

                for(var i in arrayClientes)
                {
                    //var clienteStr = /*'{\"id\":\"' + arrayClientes[i].id + '\",\"nombre\":\"'*/ + arrayClientes[i].nombre /*+'\"}'*/;
                    arrayClientesProcesados.push(arrayClientes[i].nombre);
                }

                clientesProcesados = new Bloodhound({
                      datumTokenizer: Bloodhound.tokenizers.whitespace,
                      queryTokenizer: Bloodhound.tokenizers.whitespace,
                      local: arrayClientesProcesados
                });

                $('#bloodhound .typeahead').typeahead({
                      hint: true,
                      highlight: true,
                      minLength: 1
                    },
                    {
                      name: 'clientesProcesados',
                      source: clientesProcesados
                    });

                $('#iCliente').focus();
            }
        });
    }

The problem is, that when the array of objects is set as source, typeahead dont show any option, so I dont know what i m doing wrong. This code, just showing arrayClientes[i].nombre, works fine; and every time onkeypress is fired, the source update works perfectly. So I'm missing the part where typeahead source is set with the array of objects, showing arrayClientes[i].nombre only, and then making the onselect event set the hidden input with the id of the selected item. Can any body help me?

Answer 1

I resolved!!!

function actualizarArray()
    {
        var clientesProcesados;

        $('#bloodhound .typeahead').typeahead('destroy');

        var urlTypeahead = 'http://localhost:8082/contratantes/search/findTop10ByNombreContaining?nombre=' + $('#iCliente').val();

        $.ajax({
            url: urlTypeahead,
            type: "GET",
            dataType: 'json',
            success: function (data){
                var arrayClientes = data._embedded.contratantes;
                var arrayClientesProcesados = [];

                for(var i in arrayClientes)
                {
                    arrayClientesProcesados.push({
                        id:arrayClientes[i].id,
                        nombre:arrayClientes[i].nombre
                    });                         
                }

                clientesProcesados = new Bloodhound({
                      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('nombre'),
                      queryTokenizer: Bloodhound.tokenizers.whitespace,
                      local: arrayClientesProcesados
                });

                clientesProcesados.initialize();

                $('#bloodhound .typeahead').typeahead({
                      hint: true,
                      highlight: true,
                      minLength: 1
                    },
                    {
                      name: 'clientesProcesados',
                      displayKey: 'nombre',
                      source: clientesProcesados.ttAdapter()
                    });

                $('#iCliente').focus();
            }
        });
    }

    $('#bloodhound .typeahead').bind('typeahead:selected', function(obj, datum, name) {
        $('#selectedId').val(JSON.stringify(datum.id));
    });