javascript - Typeahead.js 使用数组对象，在每次 onkeyup 时重新加载源

Question

我正在尝试使用预先输入来使复杂的查询更易于处理。因此，我们的想法是使用 typeahead 显示选项列表，当选择一个选项时，使用所选项目的标签设置输入，并使用该项目的 id 设置隐藏的输入。还有一种情况需要解决，每次输入一个字母，typeahead 的来源都会改变，导致这些字段大约有 40000 个选项，所以使用的服务得到了前 10 个过滤器。

html代码:

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

脚本代码:

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();
            }
        });
    }

问题是，当对象数组设置为源时，预先输入不会显示任何选项，所以我不知道我做错了什么。此代码仅显示 arrayClientes[i].nombre，工作正常；每次触发 onkeypress 时，源更新都会完美运行。因此，我缺少使用对象数组设置预输入源的部分，仅显示 arrayClientes[i].nombre，然后使 onselect 事件使用所选项目的 id 设置隐藏输入。有谁可以帮助我吗？

Answer 1

我决定了!!!

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));
    });