Xây dựng chức năng tìm kiếm cho website
Thì như đều người cũng đã biết, tìm kiếm kiếm là một chức năng quan trọng và luôn luôn phải có trong các ứng dụng Website. Đặc biệt trong những ứng dụng lớn, các tác dụng như kiếm tìm kiếm logic từ mọi từ khóa đang nhập vào, gợi ý từ khóa tìm kiếm kiếm, ... Là những công dụng không thể thiếu.
Bạn đang xem: Xây dựng chức năng tìm kiếm cho website
Chính do vậy, trong nội dung bài viết này mình sẽ ra mắt cho chúng ta về Typeahead.js. Đây là 1 trong những thư viện JavaScript linh hoạt, nó cung ứng mạnh mẽ cho vấn đề xây dựng một khối hệ thống tìm tìm thông minh giống như như search kiếm bên trên Google, Facebook tuyệt Twitter.
Sơ lược về Typeahead.jsTypeahead tất cả 2 thành phần chủ yếu là:
Typeahead: Là phần hiển thị giao diện fan dùngHiển thị gợi ý cho người dùng sau khi nhập trường đoản cú khóa.Hiển thị các gợi ý từ khóa bên trên ô nhập dữ liệu.In đậm các từ, các chữ trùng với trường đoản cú khóa vẫn nhập.Hỗ trợ các thiết lập cấu hình về giao diện, sự kiện linh hoạt.......Bloodhound Engine: Là một máy bộ gợi ýLấy các dữ liệu từ trước, giảm độ delay lúc hiển thị gợi ý.Sử dụng Local Storage giảm số lượng các request mang đến máy chủ.Cho phép những dữ liệu được hardcode.Sử dụng rate limit và cỗ đệm cho những request mang đến máy chủ, giảm nhẹ câu hỏi tải dữ liệu......Cài đặtNpm
Chạy lệnh sau để mua đặt:
npm install typeahead.js
CDN
Đây là link cdn mang lại các bạn có nhu cầu nhúng thẳng Typeahead vào vận dụng của mìnhhttps://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.jsChú ý: Typeahead yêu cầu phiên bạn dạng jquery trường đoản cú 1.9 trở lên.
Tạo TypeaheadĐể khởi chế tác Typeahead với bất kể trường text input đầu vào nào, ta thực hiện đoạn code sau:
$(".search-input").typeahead(options, <*datasets>)Trong đó:
options: những tùy chọn thông số kỹ thuật khi khởi sản xuất Typeahead như:
highlight : in đậm các chữ, những từ trong lưu ý trùng với các từ khóa sẽ nhập, khoác định tùy chọn này là false.hint: hiển thị từ nhắc nhở trong ô nhập dữ liệu, mặc định tùy lựa chọn này là true.minLength: số kí tự buổi tối thiểu cần phải nhập để tác dụng gợi ý ban đầu hoạt động, mặc định của tùy lựa chọn này là 1.$(".search-input").typeahead( hint: true, highlight: true, minLength: 1);datasets: Một Typeahead gồm thể có khá nhiều datasets, từng datasets vẫn trả về một tập nhắc nhở theo từ khóa đang nhập. Một vài tùy chọn cấu hình của datasets:
name: thương hiệu của datasetssource: Nguồn tài liệu dùng mang đến gợi ý, có thể là một trình bày của Bloodhound (Bộ máy triển khai các gợi ý).limit: số kí tự tối đa hiển thị của gợi ý, mang định là 5.Tạo Bloodhound EngineĐối với source vào datasets, bọn họ cần lấy tài liệu từ server. Để thao tác làm việc này bọn họ cần BloodHound. Nó là bộ máy gợi ý của Typeahead.js, nó chuyển ra những tính năng cải thiện để lấy dữ liệu từ xa, đồng thời áp dụng bộ đệm để tăng tốc.
var engine = new Bloodhound( remote: url: "/search/name?value=%QUERY%", wildcard: "%QUERY%" , datumTokenizer: Bloodhound.tokenizers.whitespace("value"), queryTokenizer: Bloodhound.tokenizers.whitespace);Bạn cần chú ý rằng đường truyền /search/name đang được thiết lập cấu hình trong route, cùng value đã là tham số truyền mang đến controller của áp dụng Laravel (ở phần dưới). Như vậy bọn họ đã có dữ liệu và có thể dùng để tùy chỉnh cấu hình cho source trong datasets của Typeahead.
Xem thêm: Tải Mẫu Thông Báo Nghỉ Lễ 30/04 Và 01/05, Thông Báo Nghỉ Lễ 30/4 Và 1/5
source: engine.ttAdapter()Tạo Templates cho các gợi ýTypeahead có thể chấp nhận được bạn sử dụng những templates để thay đổi style cho các gợi ý, chúng ta có thể sử dụng Bootstrap ở đây.
templates: empty: < "
return void */ public function down() Schema::dropIfExists("students"); Chúng ta sẽ seeding 20,000 tài liệu mẫu nhằm testing mang lại ứng dụng. áp dụng Faker để seeding, bạn hãy copy đoạn code sau cùng dán vào file databases/factories/UserFactory.php:
$factory->define(AppStudent::class, function (Faker $faker) return < "name" => $faker->name, "email" => $faker->unique()->safeEmail, "student_code" => $faker->randomNumber() >;);Tạo một seeder với tên là StudentsTableSeeder bởi lệnh:
php artisan make:seeder StudentsTableSeederVà thêm đoạn code sau vào tệp tin databases/seeds/StudentsTableSeeder.php vừa tạo.
public function run() factory(AppStudent::class, 20000)->create();Đăng ký seeder vừa chế tác vào trong file databases/seeds/DatabaseSeeder.php
public function run() $this->call(StudentsTableSeeder::class);Cuối thuộc chạy migration với seeder đã tạo bằng lệnh:
php artisan migrate --seed
Route
Chúng ta sẽ tạo 1 route để hiển thị trang kiếm tìm kiếm, 1 route nhằm hiển thị thông tin student với 2 route để triển khai việc kiếm tìm kiếm student theo name , theo email và trả tài liệu dạng JSON về cho Bloodhound . Bạn hãy copy đoạn code sau và dán vào file routes/web.php:Route::get("/students", "StudentController
searchByEmail");
Controller
Tạo một controller với tên là StudentController bởi lệnh:php artisan make:controller StudentControllerThêm những phương thức index(), show(), searchByName() với searchByEmail() vào StudentController vừa tạo.
$(document).ready(function($) var engine1 = new Bloodhound( remote: url: "/search/name?value=%QUERY%", wildcard: "%QUERY%" , datumTokenizer: Bloodhound.tokenizers.whitespace("value"), queryTokenizer: Bloodhound.tokenizers.whitespace ); var engine2 = new Bloodhound( remote: url: "/search/email?value=%QUERY%", wildcard: "%QUERY%" , datumTokenizer: Bloodhound.tokenizers.whitespace("value"), queryTokenizer: Bloodhound.tokenizers.whitespace ); $(".search-input").typeahead( hint: true, highlight: true, minLength: 1 , < source: engine1.ttAdapter(), name: "students-name", display: function(data) return data.name; , templates: empty: < "
" >, suggestion: function (data) return " + data.id + "" class="list-group-item">" + data.email + ""; >););Demo
Tuy cùng với 20,000 tài liệu nhưng vận tốc tìm tìm của Typeahead khá nhanh.
Kết luậnQua bài viết này mình đã ra mắt cho các bạn về Typeahead.js. Một thư viện hỗ trợ linh hoạt cho việc xây dựng một hệ thống tìm tìm thông minh.
Hy vọng với bài viết này, chúng ta đã hiểu thêm được một tủ sách Javascript té ích.
Tham khảohttps://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#options
https://scotch.io/tutorials/implementing-smart-search-with-laravel-and-typeahead-js
