TypeAhead.js và Bloodhound hiển thị số lượng kết quả lẻ

Question

Tôi có triển khai TypeAhead/Bloodhound trong giao diện người dùng, tìm nạp dữ liệu JSON từ máy chủ Play/Scala. Typeahead-phiên bản là 0.11.1. Việc thực hiện như sau:

HTML:

<div id="typeahead" class="col-md-8"> 
    <input class="typeahead form-control" type="text" placeholder="Select the user"> 
</div> 

JavaScript:

var engine = new Bloodhound({ 
    datumTokenizer: function (datum) { 
    var fullName = fullName(datum); 
    return Bloodhound.tokenizers.whitespace(fullName); 
    }, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    identify: function(obj) { return obj.id; }, 
    remote: { 
    url: routes.controllers.Users.index("").url, 
    cache: false, 
    replace: function (url, query) { 
     if (!isEmpty(query)) { 
      url += encodeURIComponent(query); 
     } 
     return url; 
    }, 
    filter: function (data) { 
     console.log(data); 
     return $.map(data, function (user) { 
      return { 
       id: user.id, 
       fullName: viewModel.fullName(user) 
      }; 
     }); 
    } 
} 
}); 

// instantiate the typeahead UI 
$('#typeahead .typeahead') 
.typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1, 
}, 
{ 
    name: 'engine', 
    displayKey: 'fullName', 
    source: engine 
}) 

function fullName(data) { 
    if (data === undefined) return ""; 
    else { 
    var fName = data.firstName === undefined ? "" : data.firstName; 
    var lName = data.lastName === undefined ? "" : data.lastName; 
    return fName + ' ' + lName; 
    } 
}; 

JSON-phản ứng máy chủ cung cấp cho:

[{"firstName":"Test","lastName":"User", "id":1}, ... ] 

Các trang máy chủ kết quả để nó cho tối đa 5 kết quả, được cho là giới hạn mặc định cho Typeahead/Bloodhound.

Vấn đề là khi máy chủ trả về 5 kết quả, Typeahead hiển thị 0 kết quả trong lớp phủ. Nếu máy chủ cung cấp 4 kết quả, TypeAhead hiển thị 1 trong lớp phủ. Nếu máy chủ cung cấp 3 kết quả, TypeAhead hiển thị 2 kết quả. Đối với kết quả 2 và 1, nó cho thấy số lượng phần tử chính xác trong lớp phủ. Nếu tôi loại bỏ độ dài trang và máy chủ trả về hơn 10 kết quả, thì TypeAhead hiển thị 5 kết quả (giới hạn). console.log bên trong bộ lọc hiển thị số lượng kết quả dữ liệu chính xác, do đó, chúng ít nhất đến được Bloodhound.

Điều gì có thể là vấn đề với mã này? Trường TypeAhead này là trường TypeAhead duy nhất hiện diện trong trang này. Tôi đã kiểm tra DOM và TypeAhead tạo ra số lượng trường kết quả không đúng, do đó, nó không phải là một vấn đề với CSS (đã cố gắng loại bỏ tất cả CSS tùy chỉnh).

Thanks cho bất kỳ trả lời :)

Answer 1

Có một vấn đề trên typeahead trong các mã:

https://github.com/twitter/typeahead.js/issues/1218

Bạn có thể thay đổi mã mình trong JS như mô tả trên trang vấn đề.

Answer 2

Thử khởi tạo engine với engine.initialize(); trả lại đối tượng suggestion tại filter, sẽ có sẵn tại templates ->suggestion; khởi tạo engine tại source với source:engine.ttAdapter(); trả về phần tử dưới dạng String tại suggestion, để điền menu thả xuống "đề xuất". Xem Typeahead - examples - Custom Templates

var data = [{ 
 
    "firstName": "Test", 
 
    "lastName": "User", 
 
    "id": 1 
 
}, { 
 
    "firstName": "Test2", 
 
    "lastName": "User2", 
 
    "id": 2 
 
}, { 
 
    "firstName": "Test3", 
 
    "lastName": "User3", 
 
    "id": 3 
 
}, { 
 
    "firstName": "Test4", 
 
    "lastName": "User4", 
 
    "id": 4 
 
}, { 
 
    "firstName": "Test5", 
 
    "lastName": "User5", 
 
    "id": 5 
 
}]; 
 

 
var engine = new Bloodhound({ 
 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"), 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
    local: $.map(data, function(val, key) { 
 
      // return `suggestion` object for `templates` `suggestion`   
 
      return {value:val.firstName, suggestion:val} 
 
     }) 
 
}); 
 
// initialize `engine` 
 
engine.initialize(); 
 

 
// instantiate the typeahead UI 
 
$("#typeahead .typeahead") 
 
    .typeahead({ 
 
    hint: true, 
 
    highlight: true, 
 
    minLength: 1, 
 
    }, { 
 
    name: "engine", 
 
    displayKey: "firstName", 
 
    templates: { 
 
     suggestion: function (data) { 
 
     // `suggestion` object passed at `engine` 
 
     console.log(data.suggestion); 
 
     // return suggestion element to display 
 
     var _suggestion = "<div>" 
 
         + data.suggestion.firstName 
 
         + " " 
 
         + data.suggestion.lastName + "</div>"; 
 
     return _suggestion 
 
     } 
 
    }, 
 
    source: engine.ttAdapter() 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> 
 
<div id="typeahead" class="col-md-8"> 
 
    <input class="typeahead form-control" type="text" placeholder="Select the user"> 
 
</div>

Answer 3

Nếu (ike tôi) bạn không muốn đi vào nguồn typeahead, (ví dụ bởi vì bạn muốn sử dụng phiên bản min) bạn cũng có thể thiết lập giới hạn rất cao. Sau đó, bạn sẽ phải giới hạn số lượng các mục để tự mình đưa vào danh sách.

$('#typeahead .typeahead') 
.typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 1, 
}, 
{ 
    name: 'engine', 
    displayKey: 'fullName', 
    source: engine, 
    limit: 1000 
}) 

Answer 4

Twitter được cho là abandoned dự án. Hãy thử the maintained fork. Nó có vấn đề cố định.