javascript - examples - typeahead remote

Twitter bootstrap typeahead(método ''toLowerCase'' de undefined)

Question

Estoy tratando de usar el bootstrap de Twitter para obtener los fabricantes de mi base de datos.

Debido a que Twitter Bootstrap Typeahead no admite llamadas ajax, estoy usando este fork:

https://gist.github.com/1866577

En esa página hay un comment que menciona cómo hacer exactamente lo que quiero hacer. El problema es que cuando ejecuto mi código sigo obteniendo:

No se detectó TypeError: no se puede llamar al método ''toLowerCase'' de undefined

Busqué en Google y traté de cambiar mi archivo jquery para usar el minified y el non minified así como el que está alojado en el código de Google y seguí recibiendo el mismo error.

Mi código actualmente es el siguiente:

$(''#manufacturer'').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: ''name'',
    items:11,
    onselect: function (obj) {

    }
});

en el campo url agregué el

window.location.origin

para evitar cualquier problema como ya se discutió en otra pregunta

También antes de usar $.each() y luego decidí usar $.map() como recomendó Tomislav Markovski en una pregunta similar

¿Alguien tiene alguna idea de por qué sigo teniendo este problema?

Gracias

Answer 1

¿Ha intentado usar variables de mapeo como el ejemplo a continuación, necesita usar esto cuando tiene más de una propiedad en su objeto?

source: function (query, process) {
        states = [];
        map = {};

        var data = [
            {"stateCode": "CA", "stateName": "California"},
            {"stateCode": "AZ", "stateName": "Arizona"},
            {"stateCode": "NY", "stateName": "New York"},
            {"stateCode": "NV", "stateName": "Nevada"},
            {"stateCode": "OH", "stateName": "Ohio"}
        ];

        $.each(data, function (i, state) {
            map[state.stateName] = state;
            states.push(state.stateName);
        });

        process(states);
    }

Answer 2

En mi caso tuve valores nulos en mi matriz de origen que causaron este error.

Ejemplo elaborado:

source : ["item 1", "item 2", null, "item 4"]

Answer 3

En mi caso, estaba recibiendo este error exacto y resultó que la versión de Bootstrap que estaba usando (2.0.4) no permitía pasar una función a la configuración de source .

La actualización a Bootstrap 2.1.1 solucionó el problema.

Answer 4

Los objetos de su fabricante no tienen una propiedad de "nombre", debe cambiar

property: ''name'',

a

property: ''manufacturer'',

Answer 5

Me encontré con este problema hace un tiempo. Le aconsejo que vuelva a verificar la configuración donde está incluyendo typeahead bibliotecas de typeahead (a través de main.js, app.js o config.js).

De lo contrario, puede sobrescribir la última versión de Bootstrap en su biblioteca de aplicaciones.

Answer 6

Prueba este código:

String.prototype.hashCode = function(){
var hash = 0;
if (this.length == 0) return hash;
for (i = 0; i < this.length; i++) {
    char = this.charCodeAt(i);
    hash = ((hash<<5)-hash)+char;
    hash = hash & hash; // Convert to 32bit integer
}
return hash;
};

var map_manufacter, result_manufacters;
$(''#manufacturer'').typeahead({
source: function(typeahead, query){
    $.ajax({
        url: window.location.origin+"/bows/get_manufacturers.json",
        type: "POST",
        data: "",
        dataType: "JSON",
        async: false,
        success: function(results){

            result_manufacter = [], map_manufacters = {};
            $.each(results.data.manufacturers, function(item, data){                    
                map_manufacters[data.Manufacturer.manufacturer.hashCode()] = data;
                result_manufacters.push(data.Manufacter.manufacter);
            });             
            typeahead.process(result_manufacters);                
        }
    });
},
property: ''name'',
items:11,
onselect: function (obj) {
    var hc = obj.hashCode();
    console.log(map_manufacter[hc]);
}

});

Answer 7

Solucioné este problema actualizando el archivo bootstrap3-typeahead.min.js al archivo en https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js

Creo que la mayoría de la gente puede resolver de esta manera.

Answer 8

Typeahead espera una lista de cadenas como fuente

$(''#manufacturer'').typeahead({
    source : ["item 1", "item 2", "item 3", "item 4"]
})

En su caso desea utilizarlo con una lista de objetos. De esta manera tendrás que hacer algunos cambios para que funcione.

Esto debería funcionar:

$(''#manufacturer'').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer,

                        toString: function () {
                            return JSON.stringify(this);
                        },
                        toLowerCase: function () {
                            return this.manufacturer.toLowerCase();
                        },
                        indexOf: function (string) {
                            return String.prototype.indexOf.apply(this.manufacturer, arguments);
                        },
                        replace: function (string) {
                            return String.prototype.replace.apply(this.manufacturer, arguments);
                        }
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: ''manufacturer'',
    items:11,
    onselect: function (obj) {
        var obj = JSON.parse(obj);

        // You still can use the manufacturer_id here 
        console.log(obj.manufacturer_id);

        return obj.manufacturer;
    }
});

Answer 9

LUCHA ACTUALIZADA / REVISADA: Se produjo el error que mencionó "No se puede llamar el método ''toLowerCase'' de indefinido" cuando usé la extensión original de Typeahead en bootstrap que no es compatible con AJAX. (como lo ha encontrado) ¿Está seguro de que la extensión original de typeahead no se está cargando, en lugar de la versión revisada?

He estado utilizando con éxito esta Gist de typeahead que es una ligera variación de la que mencionas. Una vez que cambié a Gist y confirmé que los datos de entrada eran buenos (al probar que la entrada era una matriz de cadenas en un objeto JS, el problema desapareció).

Espero que esto ayude

Respuesta original:

La razón por la que se produce el error es porque el valor pasado a la función de coincidencia de typeahead no está definido. Eso es solo un efecto secundario del problema real que ocurre en algún lugar entre su entrada y esa función de comparación. Sospecho que la matriz de ''fabricantes'' tiene un problema. Pruébalo primero para verificar que tienes una matriz válida.

// It appears your array constructor is missing ()
// try the following in your binding code:
var manufacturers = new Array();

Esto es lo que estoy usando para enlazar la entrada a typeahead. Confirmé que funciona con su bifurcación de typeahead modificada.

Mi HTML:

<!-- Load bootstrap styles -->
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
...

<input type="text" class="typeahead" name="Category" id="Category" maxlength="100" value="" />

...
<!-- and load jQuery and bootstrap with modified typeahead AJAX code -->
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="bootstrap-modified-typeahead.js" type="text/javascript"></script>

Mi código JavaScript vinculante:

// Matches the desired text input ID in the HTML
var $TypeaheadInput = $("#Category");  

// Modify this path to your JSON source URL
// this source should return a JSON string array like the following:
// string[] result = {"test", "test2", "test3", "test4"}
var JsonProviderUrl = "../CategorySearch";

// Bind the input to the typeahead extension
$TypeaheadInput.typeahead({
    source: function (typeahead, query) {
        return $.post(JsonProviderUrl, { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});