Xử lý lỗi được thực hiện với Typeahead mới bằng Bloodhound như thế nào?

Question

Tôi gặp sự cố trong đó Typeahead chỉ dừng hoạt động khi phiên liên kết của người dùng hết hạn. Tôi muốn có thể thực hiện một hành động khi cuộc gọi "từ xa" cho Typeahead không thành công. Điều này được xử lý như thế nào với Typeahead nói riêng? Có một số loại "lỗi" gọi lại như bạn sẽ tìm thấy trong một cuộc gọi ajax điển hình? Dưới đây là đoạn code mà tôi hiện có:

var hints = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: "/ProjectAssociation/CountryLookup?query=%QUERY", 
     wildcard: "%QUERY" 
    } 
}); 
$("#assocStoragesSelection").typeahead(null, { 
    name: "nations", 
    limit: 90, 
    valueKey: "ShortCode", 
    displayKey: "Name", 
    source: hints, 
    templates: { 
     empty: [ 
      "<div class='noitems'>", 
      "No Items Found", 
      "</div>" 
     ].join("\n") 
    } 
}); 

Answer 1

Typeahead'sBloodhound cụ đề xuất là thiếu cơ sở vật chất để thông báo cho người dùng khi có một vấn đề với một nguồn từ xa.

Thay vì sử dụng Bloodhound để nhận các đề xuất, bạn có thể sử dụng tùy chọn nguồn nguồn của Typeahead (xem here). Bằng cách chỉ định nguồn của bạn ở đây, bạn có thể xử lý các lỗi và hiển thị thông điệp phù hợp cho người dùng.

tôi đã tạo ra một ví dụ ở đây:

http://jsfiddle.net/Fresh/oqL0g7jh/

Các phần quan trọng của câu trả lời là mã tùy chọn nguồn hiển thị dưới đây:

$('.typeahead').typeahead(null, { 
    name: 'movies', 
    display: 'value', 
    source: function(query, syncResults, asyncResults) { 
    $.get(_url + query, function(movies) { 

     var results = $.map(movies.results, function(movie) { 
     return { 
      value: movie.original_title 
     } 
     }); 

     asyncResults(results); 
    }).fail(function() { 
     $('#error').text('Error occurred during request!'); 
     setTimeout("$('#error').text('');", 4000); 
    }); 
} 

Lựa chọn nguồn được cách sử dụng get jQuery để lấy dữ liệu. Bất kỳ lỗi nào xảy ra đều được xử lý bằng phương thức thất bại của đối tượng hoãn lại. Trong phương pháp đó bạn có thể xử lý một cách thích hợp bất kỳ lỗi nào và hiển thị một thông báo phù hợp cho người dùng. Khi hàm nguồn được quy định với ba thông số, điều này gây ra Typeahead để mặc định cuộc gọi này là không đồng bộ, vì thế mà cuộc gọi đến:

asyncResults(results); 

Answer 2

thử mã này

var hints = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: "/ProjectAssociation/CountryLookup?query=%QUERY", 
     wildcard: "%QUERY", 
     ajax: { 
     error: function(jqXHR) { 
      //do some thing 
     } 
    } 
    } 
}); 

Answer 3

Các "đúng" cách để xử lý các lỗi là thêm một xử lý lỗi để gọi AJAX, sử dụng hàm prepare. Nếu bạn đang sử dụng tùy chọn wildcard, hãy lưu ý rằng prepare sẽ ghi đè tùy chọn đó.

Ví dụ, bạn có thể tắt chức năng này:

new Bloodhound({ 
    remote: { 
     url: REMOTE_URL, 
     wildcard: '%s' 
    } 
}); 

vào đây:

new Bloodhound({ 
    remote: { 
     url: REMOTE_URL, 
     prepare: function(query, settings) { 
      return $.extend(settings, { 
       url: settings.url.replace('%s', encodeURIComponent(query)), 
       error: function(jqxhr, textStatus, errorThrown) { 
        // show error message 
       }, 
       success: function(data, textStatus, jqxhr) { 
        // hide error message 
       } 
      }); 
     } 
    } 
}); 

Đối tượng được trả về bởi prepare được sử dụng như một thiết lập đối tượng cho jQuery.ajax() vì vậy bạn có thể tham khảo its documentation.