Sử dụng Typeahead bằng Công cụ Tìm kiếm Tuỳ chỉnh của Google

Question

Tôi đang cố gắng để Twitter Typeahead + Bloodhound hoạt động với CSE của Google.

Cho đến giờ, tôi đã quản lý để có được kết quả trả lại, nhưng tôi không thể làm việc ra bộ dữ liệu.

var results = new Bloodhound({ 
    datumTokenizer: function(data) { 
    return Bloodhound.tokenizers.whitespace(d.value) 
    }, 
    queryTokenizer: Bloodhound.tokenizers.obj.whitespace, 
    remote: { 
    url: "http://clients1.google.com/complete/search?client=partner&hl=en&sugexp=gsnos%2Cn%3D13&gs_rn=25&gs_ri=partner&partnerid=004914516364918182382%3Ayfqw09r4qvu&types=t&ds=cse&cp=3&gs_id=15&q=%QUERY&callback=showResults&duffCallback=?", 
    ajax: $.ajax({type:'GET',dataType:'jsonp',jsonp:'duffCallback'}), 
    filter: showResults 
    } 
}); 

Xem fiddle: http://jsfiddle.net/thugsb/3KAjh/

Bạn sẽ thấy rằng tôi đã có kết quả được trả lại từ showResults() như là một mảng. Tuy nhiên, cuộc gọi đến showResults() từ filter: dường như không hoạt động, vì việc xóa bỏ dòng đó không có hiệu lực. Vì vậy, tôi không hoàn toàn chắc chắn những gì đang xảy ra.

Lưu ý duffCallback là những gì tôi đã làm việc để đọc từ this question. Nếu có một cách tốt hơn để thực hiện công việc này tôi là tất cả tai!

Answer 1

Trước tiên, bộ dữ liệu bạn đang sử dụng không hoàn toàn đúng. Bạn cần phải thay đổi nó thành:

datumTokenizer: function(data) { 
return Bloodhound.tokenizers.whitespace(data.value) 
} 

Lưu ý cách "khoảng trắng" chức năng hiện đang tham khảo các "dữ liệu" tham số đầu vào thay vì "d" mà bạn đang sử dụng.

Đối với aa giải pháp cho vấn đề của bạn, nhìn thấy nó làm việc ở đây (ví dụ thử tìm kiếm cho "vận động viên"):

http://jsfiddle.net/Fresh/FYavC/

Vấn đề chính với mã của bạn là trong URL từ xa của bạn (và điều này đã làm tôi bối rối!). Tham số chuỗi truy vấn vi phạm là:

...&callback=showResults&duffCallback=? 

"duffCallback =?" không bắt buộc khi chỉ định "datatype:'jsonp'" trong đối tượng ajax tự động thêm chi tiết gọi lại (ví dụ: "? callback =?") được sử dụng bởi yêu cầu jsonp. Ngoài ra, "callback = showResults" không được yêu cầu vì phương thức lọc được ngầm gọi bởi khung công tác Bloodhound khi yêu cầu jsonp thành công được thực hiện.

Tôi đồng ý rằng không rõ ràng về cách thực hiện cuộc gọi từ xa khi sử dụng Typeahead.js. Một ví dụ về một cuộc gọi từ xa nơi đối tượng ajax được chỉ định và một số tài liệu sẽ hữu ích trên trang web Typeahead.js!