Typeahead.js使用数组对象，在每个onkeyup上重新加载源

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

本文关键字：新加载 加载 onkeyup js 数组 对象 Typeahead      更新时间：2023-09-26

我正在尝试使用typeahead使复杂的查询更容易处理。因此，我们的想法是使用typeahead来显示选项列表，当选择一个选项时，使用所选项目的标签设置输入，并设置一个隐藏的输入，其中包含该项目的ID。还有另一种情况需要解决，每次输入一个字母时，键入的来源都会发生变化，因为这些字段获得了 40000 个选项，因此使用的服务获得了前 10 个过滤器。

网页代码：

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

问题是，当对象数组设置为源时，typeahead 不会显示任何选项，所以我不知道我做错了什么。这段代码，只显示arrayClientes[i].nombre，工作正常;每次触发 OnKeyPress 时，源更新都能完美运行。所以我错过了使用对象数组设置typeahead source的部分，仅显示arrayClientes[i].nombre，然后使onselect事件使用所选项目的ID设置隐藏输入。有人可以帮助我吗？

我解决了!!

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));
    });
相关文章：