Đề Xuất 5/2022 # Xây Dựng Chức Năng Tìm Kiếm Thông Minh Trong Laravel Với Typeahead.js # Top Like

Xem 18,711

Cập nhật nội dung chi tiết về Xây Dựng Chức Năng Tìm Kiếm Thông Minh Trong Laravel Với Typeahead.js mới nhất ngày 20/05/2022 trên website Photomarathonasia.com. Hy vọng thông tin trong bài viết sẽ đáp ứng được nhu cầu ngoài mong đợi của bạn, chúng tôi sẽ làm việc thường xuyên để cập nhật nội dung mới nhằm giúp bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến nay, bài viết này đã thu hút được 18,711 lượt xem.

--- Bài mới hơn ---

  • Trick Tìm Kiếm Tin Nhắn Cũ Trên Facebook Messenger Dễ Nhất
  • Cách Ẩn Bình Luận & Cách Chống Cướp Khách Hàng Trên Facebook
  • Cách Nhúng Video Và Bài Viết Từ Facebook Vào Một Website Bất Kỳ
  • Firmware Update Needed: Polycom Vvx And Trio Series On Microsoft Services
  • Facebook Tung Tính Năng “chia Sẻ Ngày” Trên Tin Nhắn Messenger
  • Chào mọi người, đến hẹn lại lên (hehe).

    Thì như mọi người cũng đã biết, tìm kiếm là một chức năng quan trọng và không thể thiếu trong các ứng dụng Website. Đặc biệt trong các ứng dụng lớn, các chức năng như tìm kiếm thông minh từ những từ khóa đã nhập vào, gợi ý từ khóa tìm kiếm, … là những chức năng không thể thiếu.

    Chính vì vậy, trong bài viết này mình sẽ giới thiệu cho các bạn về Typeahead.js. Đây là một thư viện JavaScript linh hoạt, nó hỗ trợ mạnh mẽ cho việc xây dựng một hệ thống tìm kiếm thông minh tương tự như tìm kiếm trên Google, Facebook hay Twitter.

    Typeahead gồm 2 thành phần chính là:

    • Typeahead: Là phần hiển thị giao diện người dùng

      • Hiển thị gợi ý cho người dùng sau khi nhập từ khóa.
      • Hiển thị các gợi ý từ khóa trên ô nhập dữ liệu.
      • In đậm các từ, các chữ trùng với từ khóa đã nhập.
      • Hỗ trợ các tùy chỉnh về giao diện, sự kiện linh hoạt.
      • ……
    • Bloodhound Engine: Là một Bộ máy gợi ý

      • Lấy các dữ liệu từ trước, giảm độ delay khi hiển thị gợi ý.
      • Sử dụng Local Storage giảm số lượng các request đến máy chủ.
      • Cho phép các dữ liệu được hardcode.
      • Sử dụng rate limit và bộ đệm cho các request đến máy chủ, giảm nhẹ việc tải dữ liệu.
      • …..

    Npm

    Chạy lệnh sau để cài đặt:

    CDN

    Đây là link cdn cho các bạn muốn nhúng thẳng Typeahead vào ứng dụng của mình https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js

    Chú ý: Typeahead yêu cầu phiên bản jquery từ 1.9 trở lên.

    Để khởi tạo Typeahead với bất kể trường text input nào, ta sử dụng đoạn code sau:

    Trong đó:

    Đối với source trong datasets, chúng ta cần lấy dữ liệu từ server. Để làm việc này chúng ta cần BloodHound. Nó là bộ máy gợi ý của Typeahead.js, nó đưa ra nhiều tính năng nâng cao để lấy dữ liệu từ xa, đồng thời sử dụng bộ đệm để tăng tốc.

    Bạn cần chú ý rằng đường dẫn /search/name sẽ được thiết lập trong route, và value sẽ là tham số truyền đến controller của ứng dụng Laravel (ở phần dưới). Như vậy chúng ta đã có dữ liệu và có thể dùng để thiết lập cho source trong datasets của Typeahead.

    Typeahead cho phép bạn sử dụng các templates để thay đổi style cho các gợi ý, bạn cũng có thể sử dụng Bootstrap ở đây.

    Migration & Seeder

    Ở đây chúng ta sẽ tạo một table students với các thuộc tính name, emailstudentcode. Tạo một Migration như sau:

    Chúng ta sẽ seeding 20,000 dữ liệu mẫu để testing cho ứng dụng. Sử dụng Faker để seeding, bạn hãy copy đoạn code sau và dán vào file databases/factories/UserFactory.php:

    Tạo một seeder với tên là StudentsTableSeeder bằng lệnh:

    php artisan make:seeder StudentsTableSeeder

    Và thêm đoạn code sau vào file databases/seeds/StudentsTableSeeder.php vừa tạo.

    Đăng ký seeder vừa tạo vào trong file databases/seeds/DatabaseSeeder.php

    Cuối cùng chạy migration và seeder đã tạo bằng lệnh:

    php artisan migrate --seed

    Route

    Chúng ta sẽ tạo 1 route để hiển thị trang tìm kiếm, 1 route để hiển thị thông tin student và 2 route để thực hiện việc tìm kiếm student theo name , theo email và trả dữ 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:

    Controller

    Tạo một controller với tên là StudentController bằng lệnh:

    php artisan make:controller StudentController

    Thêm các phương thức index(), show(), searchByName()searchByEmail() vào StudentController vừa tạo.

    View

    Chúng ta sẽ tạo một View index đơn giản với 1 ô input tìm kiếm. Ta cần include thư viện Typeahead vào phần header của View. Ở đây mình sẽ viết code Css và Javascript trong view cho thuận tiện, tuy nhiên các bạn nên tách ra file riêng để dễ dàng cho việc quản lý.

    Tuy với 20,000 dữ liệu nhưng tốc độ tìm kiếm của Typeahead khá nhanh.

    Qua bài viết này mình đã giới thiệu 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 kiếm thông minh.

    https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#options https://scotch.io/tutorials/implementing-smart-search-with-laravel-and-typeahead-js

    All Rights Reserved

    --- Bài cũ hơn ---

  • Tìm Việc Làm Quanh Đây Siêu Tiện Ích, Bạn Đã Thử Chưa?
  • Xây Dựng Chức Năng Tìm Kiếm Với Lệnh Like Trong Php
  • Tắt Chức Năng Tìm Kiếm Trong WordPress
  • Cách Khôi Phục Lại Tài Khoản Facebook Bị Khóa
  • Hướng Dẫn Khôi Phục Lại Tài Khoản Facebook Bị Khóa
  • Bạn đang đọc nội dung bài viết Xây Dựng Chức Năng Tìm Kiếm Thông Minh Trong Laravel Với Typeahead.js trên website Photomarathonasia.com. Hy vọng một phần nào đó những thông tin mà chúng tôi đã cung cấp là rất hữu ích với bạn. Nếu nội dung bài viết hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!

  • Web hay
  • Links hay
  • Push
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100