javascript - Use un valor diferente de los datos JSON en lugar de displayKey utilizando Typeahead

jquery typeahead.js

Question

Comencé a usar Typeahead.js y estoy luchando para encontrar una manera de permitir que un usuario escriba y busque un nombre de compañía, una vez seleccionado ingrese el código de compañía asociado.

archivo .json:

[{
    "company_name": "Facebook",
    "code": "fb",
}, {
    "company_name": "Google",
    "code": "goog",
}, {
    "company_name": "Yahoo",
    "code": "yhoo",
}, {
    "company_name": "Apple",
    "code": "aapl",
}, {
    "company_name": "Royal Mail",
    "code": "rmg.l",
}]

.js Script:

var stocks = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.code);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 3,
    prefetch: {
        url: ''javascripts/stockCodes.json'',
        filter: function(list) {
            return $.map(list, function(stock) {
                return {
                    code: stock
                };
            });
        }
    }
});

stocks.initialize();

$(''.typeahead'').typeahead(null, {
    name: ''stocks'',
    displayKey: ''code'',
    source: stocks.ttAdapter()
});

Actualmente, esto solo muestra la lista de códigos cuando el usuario escribe en el campo de entrada. Sin embargo, me gustaría saber si hay una forma de permitirles buscar en el code pero una vez seleccionado, ¿el valor en el cuadro de texto será company_name ? ¿Es esto posible incluso utilizando este plugin? Cualquier ayuda será apreciada.

¡Gracias!

Answer 1

Agregue el valor que debe mostrarse en el parámetro de visualización :

$(".comp-search").typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    displayKey: ''company_name'',
}, {
    source: engine.ttAdapter(),
    templates: {
        empty: [''<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>''],
        header: [''<div class="list-group search-results-dropdown">''],
        suggestion: function (data) {
            return ''<a href="javascript:void(0);" class="list-group-item">'' + data.company_name + ''</a>'';
        }
    },
    display: function(data) { return data.company_name; }
});

Espero que esto sea de ayuda

Answer 2

Necesitas usar la variable ´displayKey´. Vea a continuación copiar y pegar de los documentos de typeahead:

displayKey : para un objeto de sugerencia dado, determina la representación de cadena de este. Esto se utilizará cuando se establezca el valor del control de entrada después de seleccionar una sugerencia. Puede ser una cadena clave o una función que transforma un objeto de sugerencia en una cadena. El value predeterminado es el value .

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

Tu código específico sería entonces algo como esto:

var stocks = new Bloodhound({
        datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.code); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 3,
        prefetch: {
            url: ''javascripts/stockCodes.json'',
            filter: function(list) {
                // This should not be required, but I have left it incase you still need some sort of filtering on your server response
                return $.map(list, function(stock) { return { code: stock.code, company_name: stock.company_name }; });
            }
        }
    });

    stocks.initialize();

    $(''.typeahead'').typeahead(null, {
        name: ''stocks'',
        displayKey: function(stock) {
           return stock.company_name;
        },
        source: stocks.ttAdapter()
    });

Tenía un requisito muy similar en mi propio sitio, y tuve este trabajo sin problemas. Sin embargo, no he probado este ejemplo en particular, así que avíseme si funciona.

Recuerde llamar a stocks.clearPrefetchCache(); para borrar su caché para hacer más fáciles los errores de pista.

Answer 3

No soy jQuery / JavaScript-Guru. Así que lo prefiero de la manera más fácil. Solo para entender lo que hice cuando miro mi código más tarde ...

Gracias a Eric Saupe encontré una solución inteligente:

//JSON FILE
[
    {
        "company_name": "Facebook",
        "code": "fb",
    },
    {
        "company_name": "Google",
        "code": "goog",
    },
    {
        "company_name": "Yahoo",
        "code": "yhoo",
    },
    {
        "company_name": "Apple",
        "code": "aapl",
    },
    {
        "company_name": "Royal Mail",
        "code": "rmg.l",
    },
 ]

// JS SCRIPT

   var stocks = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace(''company_name''),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: ''javascripts/stockCodes.json''
    });

    stocks.initialize();

    $(''.typeahead'').typeahead(
        null, {
        name: ''stocks'',
        displayKey: ''company_name'',
        source: stocks.ttAdapter()
    }).on(''typeahead:selected'', function(event, data){            
        $(''.typeahead'').val(data.code);        
    });

Solo use los eventos personalizados de typeahead como se describe en los documentos en github .

Esperanza, esto ayuda (y cuando es solo para mi propia referencia posterior).

JSFIDDLE

Answer 4

Si leo correctamente, creo que esto es lo que quieres:

var stocksData = [{
    "Facebook": "fb",
}, {
    "Google": "goog",
}, {
    "Yahoo": "yhoo",
}, {
    "Apple": "aapl",
}, {
    "Royal Mail": "rmg.l",
}, ];

var stocks = new Bloodhound({
    datumTokenizer: function (d) {
                  for (var prop in d) {
                      return Bloodhound.tokenizers.whitespace(d[prop]);
                  }

    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 3,
    local: stocksData,
});

stocks.initialize();

$(''input'').typeahead(null, {
    name: ''stocks'',
    displayKey: function(stocks) {
        for (var prop in stocks) {
            return prop;    
        }
    },
    source: stocks.ttAdapter()
});

Por supuesto, querrá cambiar el local a prefetch / remote como el que tenía para el archivo json.

ACTUALIZAR

FIDDLE

Answer 5

Tenía el mismo problema, no podía hacerlo funcionar con la propiedad display o displayKey. Trabajé alrededor de él agregando la propiedad del nombre a los objetos de origen:

            $.each(stocks, function (i, item) {
                item.name = item.company_name;
            });

Answer 6

displayKey se utiliza para indicar qué tecla debe mostrarse en la lista desplegable y en el campo de entrada después de que el usuario haya seleccionado una entrada.

Si desea que las entradas que se muestran en la lista desplegable sean diferentes de las que terminan en el campo de entrada, debe usar una plantilla personalizada.

De la documentation :

suggestion : se utiliza para representar una única sugerencia. Si está configurado, esto tiene que ser una plantilla precompilada. El objeto de sugerencia asociado servirá como contexto. El valor predeterminado de displayKey envuelto en una etiqueta p es decir, <p>{{value}}</p> .

Algo como esto debería funcionar:

$(''.typeahead'').typeahead(null, {
    name: ''stocks'',
    displayKey: ''company_name'',
    source: stocks.ttAdapter(),
    templates: {
        suggestion: function (stock) {
            return ''<p>'' + stock.code + ''</p>'';
        }
    }
});

La plantilla enviada se usará para mostrar stock.code en la lista desplegable, mientras que stock.company_name se mostrará en el campo de entrada después de que el usuario seleccione una entrada.