twitter bootstrap typeahead (phương pháp 'toLowerCase' không xác định)

Question

Tôi đang cố gắng sử dụng twitter bootstrap để có được các nhà sản xuất từ ​​DB của tôi.

Vì twitter bootstrap typeahead không hỗ trợ các cuộc gọi ajax Tôi đang sử dụng nĩa này:

https://gist.github.com/1866577

Trong trang đó có comment này đề cập đến làm thế nào để thực hiện chính xác những gì tôi muốn làm. Vấn đề là khi tôi chạy mã của tôi, tôi tiếp tục nhận được:

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

Tôi googled xung quanh và đến cố gắng thay đổi tập tin jquery của tôi để cả hai bằng cách sử dụng minified và phi minified cũng như một lưu trữ trên google mã và tôi vẫn tiếp tục nhận được cùng một lỗi.

Mã của tôi hiện nay là như sau:

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

    } 
}); 

trên các lĩnh vực url tôi thêm

window.location.origin

để tránh bất kỳ vấn đề như đã thảo luận về một câu hỏi

Ngoài ra trước khi tôi là sử dụng $.each() và sau đó quyết định sử dụng $.map() như được đề xuất Tomislav Markovski trong một similar question

Bất cứ ai cũng có ý tưởng tại sao tôi tiếp tục gặp vấn đề này ?!

Cảm ơn bạn

Answer 1

CẬP NHẬT/sửa đổi xem xét vấn đề: Các lỗi mà bạn đề cập "Không thể gọi phương thức 'toLowerCase' không xác định" xảy ra với tôi khi tôi sử dụng phần mở rộng Typeahead gốc trong bootstrap mà không hỗ trợ AJAX. (như bạn đã tìm thấy) Bạn có chắc chắn rằng phần mở rộng typeahead gốc không tải, thay vì phần mở rộng đã sửa đổi của bạn?

Tôi đã thành công using this Gist of typeahead đó là một biến thể nhỏ trên trang bạn đề cập. Khi tôi chuyển sang Gist đó và khẳng định rằng các dữ liệu đầu vào là tốt (kiểm tra rằng các đầu vào là một mảng chuỗi trong một đối tượng JS, vấn đề đi đi

Hope this helps

---

câu trả lời gốc.:

Lý do xảy ra lỗi là vì giá trị được chuyển vào hàm đối sánh typeahead không xác định .Đó chỉ là tác dụng phụ cho vấn đề thực sự xảy ra ở đâu đó giữa đầu vào của bạn và hàm đối sánh đó. có vấn đề. Hãy thử nghiệm trước để xác minh bạn có một mảng hợp lệ.

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

Đây là những gì tôi đang sử dụng để ràng buộc đầu vào cho typeahead. Tôi xác nhận rằng nó hoạt động với ngã ba typeahead sửa đổi của bạn.

HTML của tôi:

<!-- 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> 

ràng buộc mã JavaScript của tôi:

// 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

đối tượng sản xuất của bạn không có một "cái tên" bất động sản, bạn nên thay đổi

property: 'name', 

để

property: 'manufacturer', 

Answer 3

Trong trường hợp của tôi, tôi đã nhận được lỗi chính xác này, và hóa ra phiên bản Bootstrap tôi đang sử dụng (2.0.4) không hỗ trợ truyền chức năng đến thiết lập source.

Nâng cấp lên Bootstrap 2.1.1 đã khắc phục sự cố.

Answer 4

Typeahead mong đợi một danh sách các chuỗi như nguồn

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

---

Trong trường hợp của bạn, bạn muốn sử dụng nó với một danh sách các đối tượng. Bằng cách này bạn sẽ phải thực hiện một số thay đổi để làm cho nó hoạt động

này nên hoạt động:

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

tôi stumbled khi vấn đề này một thời gian trước đây. Tôi khuyên bạn nên kiểm tra lại cấu hình nơi bạn đang bao gồm thư viện typeahead (thông qua main.js, app.js hoặc config.js).

Nếu không, bạn có thể ghi đè latest Bootstrap version vào thư viện ứng dụng của mình.

Answer 6

Bạn đã thử sử dụng các biến ánh xạ như ví dụ bên dưới, bạn cần sử dụng biến này khi bạn có nhiều hơn một thuộc tính trong đối tượng của mình;

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

Hãy thử mã này:

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

Trong trường hợp của tôi, tôi đã có giá trị null trong mảng nguồn gây ra lỗi này.

contrived dụ:

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

Answer 9

tôi giải quyết vấn đề này chỉ cập nhật các tập tin bootstrap3-typeahead.min.js đến tập tin trong https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js

Tôi nghĩ rằng hầu hết mọi người có thể giải quyết theo cách này.