Question

我正在尝试使用typeahead来使复杂查询更容易处理。因此，我们的想法是使用typeahead来显示选项列表，当选择一个选项时，使用所选项目的标签设置输入并设置隐藏了该项目id的输入。还有另一种情况需要解决，每次输入一个字母，输入更改的来源，导致这些字段获得40000个选项aprox。所以使用的服务得到了前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();
            }
        });
    }

问题是，当对象数组设置为source时，typeahead不显示任何选项，所以我不知道我做错了什么。这段代码，只显示arrayClientes [i] .nombre，工作正常;每次启动onkeypress时，源更新都能正常工作。所以我缺少使用对象数组设置typeahead源的部分，仅显示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));
    });

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

1 个答案: