Bootstrap Typeahead
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Tạo Typeahead với Bootstrap
Các trường đầu vào typeahead rất phổ biến trong các web form hiện đại. Mục đích chính của việc sử dụng typeahead là cải thiện trải nghiệm người dùng bằng cách cung cấp các gợi ý hoặc danh sách các lựa chọn khả thi dựa trên văn bản họ đã nhập khi điền biểu mẫu hoặc tìm kiếm thứ gì đó – như tìm kiếm tức thì của Google.
Chức năng typeahead cũng giúp tiết kiệm thời gian và giảm thiểu số lỗi tiềm ẩn, vì người dùng ít có khả năng mắc lỗi chính tả hơn. Plugin Typeahead đã bị loại bỏ khỏi Bootstrap (v3.0 +), chuyển sang sử dụng typeahead của Twitter.
Twitter typeahead là một thư viện tự động hoàn thành nhanh và đầy đủ tính năng được lấy cảm hứng từ chức năng tìm kiếm tự động hoàn thành của twitter.com.
Để tạo Twitter typeahead, trước tiên hãy tải xuống typeahead.js
từ trang chính thức của họ – https://twitter.github.io/typeahead.js/ và đưa vào dự án của bạn, sau đó, bạn có thể biến bất kỳ phần tử <input>
dựa trên văn bản nào thành một typeahead.
Twitter typeahead yêu cầu jQuery 1.9+ để hoạt động. Phiên bản không phải jQuery không khả dụng.
Tạo Twitter typeahead với tập dữ liệu cục bộ
Ví dụ sau đây sẽ cho bạn thấy cách tạo Twitter typeahead với tập dữ liệu cục bộ (local dataset).
<script>
$(document).ready(function(){
// Defining the local dataset
var cars = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen'];
// Constructing the suggestion engine
var cars = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: cars
});
// Initializing the typeahead
$('.typeahead').typeahead({
hint: true,
highlight: true, /* Enable substring highlighting */
minLength: 1 /* Specify minimum characters required for showing suggestions */
},
{
name: 'cars',
source: cars
});
});
</script>
Kết quả của ví dụ trên sẽ giống như sau:
Lưu ý: Bloodhound là công cụ gợi ý của
typeahead.js
. Nó rất linh hoạt và cung cấp các chức năng nâng cao như tìm nạp trước dữ liệu từ xa, tra cứu nhanh thông qua bộ nhớ đệm thông minh sử dụng bộ nhớ cục bộ của trình duyệt , v.v.
Mẹo: Đặt
autocomplete="off"
cho hộp nhập liệu nếu bạn muốn ngăn các menu trình duyệt mặc định xuất hiện trên trình đơn thả xuống kiểu Bootstrap typeahead.
Tạo Twitter typeahead với tập dữ liệu bên ngoài
Bạn cũng có thể chỉ định tập dữ liệu bên ngoài (external dataset) thông qua một URL trỏ đến tệp JSON chứa một mảng dữ liệu. Các đơn vị riêng lẻ tạo tập dữ liệu được gọi là tập dữ liệu.
<script>
$(document).ready(function(){
// Sonstructs the suggestion engine
var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// The url points to a json file that contains an array of country names
prefetch: 'data/countries.json'
});
// Initializing the typeahead with remote dataset without highlighting
$('.typeahead').typeahead(null, {
name: 'countries',
source: countries,
limit: 10 /* Specify max number of suggestions to be displayed */
});
});
</script>