Bài tập

Laravel 5.7: Tìm kiếm tự động từ cơ sở dữ liệu với typeahead JS

avatar
Huy Erick
00:00 12/04/2024

Nhắm mục tiêu Hôm nay, mình sẽ hướng dẫn cách tìm kiếm tự động từ cơ sở dữ liệu bằng cách sử dụng typeahead JS trong ứng dụng Laravel 5.7. Trên các trang web lớn,...

Nhắm mục tiêu

Hôm nay, mình sẽ hướng dẫn cách tìm kiếm tự động từ cơ sở dữ liệu bằng cách sử dụng typeahead JS trong ứng dụng Laravel 5.7. Trên các trang web lớn, việc tìm kiếm và nhập liệu thông minh có vai trò quan trọng. Tính năng gợi ý nhập liệu giúp cải thiện trải nghiệm người dùng, giúp cho việc tìm kiếm và nhập liệu trở nên dễ dàng hơn. Đồng thời, tính năng này cũng giúp khách hàng tìm kiếm chính xác sản phẩm hoặc thông tin mà họ muốn tìm. Google là một minh chứng cho sự thành công của tính năng này. Google đã giúp người dùng tìm kiếm kết quả ngay khi nhập vào 1-2 từ trong từ khóa. Sẽ thật tuyệt vời khi trang web của bạn có một tính năng tuyệt vời như Google. Bắt đầu thôi!

Bước 1: Cài đặt Laravel 5.7

Điều này là một việc dễ dàng khi bạn làm việc trên Laravel. Hãy chạy câu lệnh sau trong terminal:

Xem thêm: 
composer create-project -prefer-dist laravel/laravel blog

Lưu ý rằng bạn cần phải cài đặt composer trên máy tính của bạn trước khi có thể cài đặt Laravel. Nếu bạn chưa biết về composer, hãy tìm hiểu thêm.

Bước 2: Cài đặt Typeahead.js

Typeahead.js là một thư viện Javascript mạnh mẽ và linh hoạt, giúp xây dựng tính năng tìm kiếm gợi ý thông minh. Typeahead bao gồm hai phần chính: Typeahead và Bloodhound.

  • Typeahead: Phần chịu trách nhiệm xử lý giao diện người dùng, hiển thị gợi ý ngay khi người dùng nhập liệu. Nó hỗ trợ nhiều tùy chỉnh về giao diện, nhấn mạnh các từ trùng khớp trong gợi ý, và kích hoạt các sự kiện tùy chỉnh.
  • Bloodhound: Bộ máy gợi ý mạnh mẽ, cho phép dữ liệu được lưu trữ và xử lý trước để giảm thời gian trễ khi gợi ý. Bloodhound cung cấp tính năng bộ nhớ cache và hạn chế số lượng yêu cầu đến máy chủ.

Để cài đặt Typeahead, bạn có hai lựa chọn:

  1. Sử dụng npm: npm i typeahead
  2. Tích hợp thông qua CDN: Sử dụng CDN giúp tải tập tin nhanh hơn. Tuy nhiên, bạn cần lưu ý rằng nếu CDN không có server ở gần Việt Nam, việc tải thư viện sẽ gặp khó khăn khi mạng chậm. Dưới đây là đường dẫn tới các tập tin Typeahead.js và jQuery trên CDN:
  • jQuery: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js
  • Typeahead: https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js

Lưu ý: Typeahead yêu cầu jQuery phiên bản từ 1.9 trở lên.

Trong bài viết này, chúng ta sẽ sử dụng lựa chọn thứ hai cho nhanh. Tuy nhiên, đối với các dự án lớn, tốt nhất nên sử dụng cách thứ nhất để tối ưu tài nguyên sử dụng Laravel Mix.

Bước 3: Xây dựng BackEnd

3.1 Tạo bảng Customer và dữ liệu mẫu

Đầu tiên, hãy tạo model Customer và migration tương ứng với lệnh sau:

php artisan make:model Customer -m

Sau đó, mở file migration mới tạo và chỉnh sửa nó như sau:

increments('id');
            $table->string('name', 255);
            $table->string('email', 255);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('customers');
    }
}

Sau đó, chạy lệnh sau để tạo bảng trong cơ sở dữ liệu:

php artisan migrate

3.2 Tạo dữ liệu mẫu với Faker

Bây giờ, chúng ta sẽ tạo dữ liệu mẫu để dễ dàng tìm kiếm với typeahead. Đầu tiên, hãy tạo file CustomerFactory.php trong thư mục database/factories và thêm code sau:

define(App\Customer::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'email' => $faker->email,
    ];
});

Tiếp theo, chúng ta sẽ sử dụng Laravel Seeding để tạo 1000 dữ liệu mẫu cho bảng customers trong cơ sở dữ liệu. Hãy chạy lệnh sau:

php artisan make:seeder CustomersTableSeeder

Sau đó, thêm đoạn mã sau vào file CustomersTableSeeder.php trong thư mục database/seeds:

create();
    }
}

Cuối cùng, chạy lệnh sau để tạo dữ liệu mẫu:

php artisan db:seed

Đồng thời, hãy chắc chắn rằng bạn đã khai báo sử dụng CustomersTableSeeder trong file DatabaseSeeder.php:

call(CustomersTableSeeder::class);
    }
}

3.3 Thiết lập Route

Cuối cùng, chúng ta cần tạo các route để xử lý yêu cầu từ phía client. Hãy thêm route sau vào file routes/web.php để hiển thị thông tin chi tiết của khách hàng:

Route::get('/search', 'SearchController@searchUsers');

Tiếp theo, thêm route sau vào file routes/web.php để hiển thị thông tin chi tiết của sản phẩm:

Route::get('product/{id}', function() {
    $product = Product::find($id);
    return $product->name . '-' . $product->price;
});

3.4 Tạo Controller

Bước cuối cùng là tạo controller SearchController bằng lệnh artisan:

php artisan make:controller SearchController

Thêm phương thức searchUsers vào file SearchController.php trong thư mục app/Http/Controllers:

get('q') . '%')->get();

        return response()->json($customers);
    }
}

3.5 Tạo View

Cuối cùng, chúng ta sẽ tạo view để hiển thị giao diện cho trang web. Dưới đây là nội dung của file index.blade.php:




    
    
    
    
    
    Tìm kiếm thông minh với Typehead.js trong Laravel
    
    


    

    

        

            
Ví dụ tìm kiếm thông minh sử dụng Typeahead.js trong ứng dụng Laravel

3.6 Khởi tạo Typeahead

Giờ đây, chúng ta đã sẵn sàng khởi tạo Typeahead trên trang web của mình. Hãy thêm đoạn mã sau vào file index.blade.php:

$("#name").typeahead({
    hint: true,
    highlight: true,
    minLength: 1
});

Cuối cùng, chúng ta cần khởi tạo Bloodhound, bộ máy gợi ý cho Typeahead.js. Bloodhound sẽ lấy dữ liệu từ server và xử lý các yêu cầu tìm kiếm. Chúng ta đã sẵn sàng sử dụng dữ liệu và đặt nó trong tùy chọn source của Typeahead như sau:

var engine = new Bloodhound({
    remote: {
        url: '/search?q=%QUERY%',
        wildcard: '%QUERY%'
    },
    datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
    queryTokenizer: Bloodhound.tokenizers.whitespace
});

$(".search-input").typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    source: engine.ttAdapter(),
    name: 'usersList',
    templates: {
        empty: [
            '
',
                '
Không có kết quả phù hợp.
',
            '
'
        ],
        header: [
            '
'
        ],
        suggestion: function (data) {
            return '' + data.name + ''
        }
    }
});

Kết luận

Việc sử dụng Typeahead trong ứng dụng Laravel giúp tăng trải nghiệm người dùng. Typeahead không chỉ hữu ích cho tính năng tìm kiếm, mà bạn cũng có thể sử dụng nó trong các form nhập liệu để gợi ý thông tin. Hi vọng bài viết này sẽ giúp ích cho bạn trong các dự án Laravel của riêng mình.

Nguồn tham khảo: https://www.kerneldev.com/2018/02/07/laravel-autocomplete-search-with-typeahead-js/

Nguồn tham khảo: https://allaravel.com/laravel-tutorials

?>
BÀI LIÊN QUAN
1