Twitter typeahead de arranque (método 'toLowerCase' de la indefinida)

Question

Estoy tratando de utilizar de arranque Twitter para obtener los fabricantes de mi DB.

Debido typeahead Twitter arranque no admite llamadas ajax estoy usando este tenedor:

https://gist.github.com/1866577

En esa página hay esta comment que menciona cómo hacer exactamente lo que yo quiero hacer. El problema es cuando ejecuto mi código guardo en conseguir:

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

Googled vuelta y se encontró intentado cambiar mi archivo de jQuery para ambos usando el minified y no minified, así como la alojado en Google Code y me quedé obteniendo 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 he añadido el

window.location.origin

para evitar cualquier problema como ya se ha discutido en otra pregunta

también antes de que fuera utilizando $.each() y luego decidió utilizar como $.map() recomendado Tomislav Markovski en un similar question

Alguien tiene alguna idea de por qué me siguen dando este problema ?!

Gracias

Answer 1

ACTUALIZADO/MIRADA revisado en la EMISIÓN: El error que usted ha mencionado "No se puede llamar al método 'toLowerCase' de la indefinida" se me ocurrió cuando utilicé la extensión TYPEAHEAD original en arranque que no soporta AJAX. (como lo ha encontrado) ¿Está seguro de que no se está cargando la extensión typeahead original, en lugar de la versión revisada?

He sido afortunada using this Gist of typeahead que es una ligera variación en el que usted menciona. Una vez que me pasa a que Gist y confirmó que los datos de entrada era bueno (probando que la entrada era una matriz de cadenas en un objeto JS, el problema se fue

Esperanza esto ayuda

---

Respuesta original.:

La razón por la que se produce el error es porque el valor pasado a la función typeahead matcher no está definido. Eso es solo un efecto secundario al problema real que ocurre entre su entrada y esa función de emparejamiento. tiene un problema. Pruébelo primero para verificar que tiene 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 vincular la entrada a typeahead. Confirmé que funciona con tu fork modificada typeahead.

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 vinculante código JavaScript:

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

Answer 2

Sus objetos fabricante no tienen una propiedad "nombre", debe cambiar

property: 'name', 

a

property: 'manufacturer', 

Answer 3

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

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

Answer 4

TYPEAHEAD esperan una lista de cadena como fuente

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

---

En el caso de que quiera utilizar con una lista de objetos. De esta manera usted tendrá que hacer algunos cambios para que funciona

Esto si funciona:

$('#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 5

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

De lo contrario, puede sobrescribir el latest Bootstrap version en la biblioteca de su aplicación.

Answer 6

¿Ha intentado utilizar las variables de mapeo como el siguiente ejemplo, 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 7

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 8

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

ejemplo artificioso:

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

Answer 9

que resuelve este problema sólo actualizar el archivo bootstrap3-typeahead.min.js en el archivo de 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.