Hướng dẫn live search javascript

Bài viết này sẽ chỉ cho bạn cách để tạo ra một hệ thống lọc đơn giản để sử dụng cho Live Search chỉ với một vài dòng code. Với kỹ thuật này bạn có thể áp dụng khi Lập trình web - rất đơn giản nhưng hiệu quả, chúng ta hãy cùng bắt đầu nào!

Thêm vào plugin tìm kiếm trực tiếp

Với hướng dẫn này, chúng ta sẽ sử dụng HideSeek- là một  jQuery plugin đơn giản, chưa có chỉnh sửa cho việc Live search - tương thích với IE7+, Chrome, Firefox, Safari and jQuery 1.8.1, 1.9.1, 1.11.0, 2.1.0 và thông qua các thuộc tính dữ liệu và tùy chỉnh sự kiện sẽ có thêm các tính năng như tô sáng ký tự, tùy chỉnh thông báo, chuyển hướng.

Việc cấu hình cũng khá là đơn giản, chỉ là:

Về cơ bản bạn cần phải khai báo id, lớp(class)  hoặc tất cả những gì cần cho dữ liệu input trong trường hợp dữ liệu input là nội dung tìm kiếm.

Đây là cách miêu tả dữ liệu input cần tìm:

Bạn hãy nhìn ở đây data-list=”.sorting_list”. Đó chính là nơi chúng ta xác định tập dữ liệu nguồn sẽ được.

Danh sách này bao gồm một số hình ảnh và văn bản.

Mã lệnh HTML rất đơn giản, không có gì phức tạp. 

Hoạt động của đoạn code tương đối đơn giản và dễ hiểu. Nếu bạn gõ từ “Thầy Cô” vào dữ liệu đầu vào search thì bạn sẽ có thấy kết quả tìm kiếm là hình ảnh Thầy Cô và những văn bản liên quan.

Bây giờ đến với phần thú vị: Một hệ thống lọc dựa trên nột dung cần tìm kiếm của dữ liệu input

Như những gì bạn thấy, trong ảnh chụp màn hình phía trên chúng ta có một số đường liên kết như “Thầy Cô”, “Trường Học”, “Bạn bè”.

Tiếp theo, chúng ta cần tạo ra những từ khóa hoạt động như những bộ lọc. Ví du: khi chúng ta chọn “Bạn bè” thì dữ liệu đầu vào search sẽ được điền bằng từ khóa “Bạn bè”.

Chúng ta cũng có “View all” – chắc bạn cũng biết chức năng của nó là gì đúng không?

The magic:

Đầu tiên ta phải chắc chắn nếu người dùng nhấn chọn vào đường liên kết mà có tên lớp là “clear” thì ta sẽ xóa dữ liệu input search và chúng ta sẽ có tất cả dữ liệu

Kế đến ta phải kiểm tra nếu ấn chọn đường liên kết có tên lớp  là “filter” thì ta sẽ thêm vô đầu vào dữ liệu search từ khóa tương ứng.

Nó thực đơn giản, đúng không?

Bây giờ chúng ta đã có một hệ thống lọc đầy đủ chức năng chỉ với vài dòng code. Bạn không cần phải thêm vào các plugin có đầy ấp chức năng có dung lượng lớn nếu bạn chỉ cần vài chức năng đơn giản.

Chỉ thế thôi! Chúng ta đã vừa xây dựng ra một một bộ lọc nội dung nhanh và đơn giản bằng cách sử dụng jQuerry plugin tìm kiếm trực tiếp.

Tài hướng dẫn viết code tại đây

Tổng hợp từ medium.com

Ngày nay đối với mọi trang web dù là blog hay website thương mại, một thanh tìm kiếm luôn luôn là cần thiết. Tuy nhiên những ngày tháng của một thanh tìm kiếm theo cách đơn giản đã qua. Hiện nay một thanh tìm kiếm live, tức là có thể hiển thị kết quả tìm tiếm tức thì khiến cho quá trình sử dụng của người dùng dễ dàng hơn rất nhiều. Hôm nay mình sẽ hướng dẫn các bạn tạo một thanh live search trong Laravel sử dụng Ajax.

Thiết lập thông tin database trong .env

Truy cập vào file .env trong project của bạn và thiết lập thông tin của file .env tại phần database như sau:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database.name
DB_USERNAME=database.username
DB_PASSWORD=database.password

Với database.name, database.username, database.password lần lượt là tên của cơ sở dữ liệu, tên của người dùng và mật khẩu truy cập cơ sở dữ liệu.

Tạo migration

Giờ chúng ta cần tạo một bảng để lưu trữ dữ liệu, sử dụng câu lệnh sau để tạo một migration, ở đây mình tạo một bảng có tên là 'products'

php artisan make:migration create_products_table --create=products

Sau khi chạy xong câu lệnh migration, bạn sẽ thấy một file mới được tạo ở database/migration/_create_products_table.php

Mình sẽ thêm một số trường cho bảng này, ở đây mình sẽ dùng trường 'title' để tìm kiếm.

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->string('description');
            $table->integer('price');
            $table->timestamps();
        });
    }

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

Sau khi viết xong migration, bây giờ chúng ta sẽ tạo bảng, chạy câu lệnh sau:

php artisan migrate

Sau khi chạy xong, bạn có thể kiểm tra cơ sở dữ liệu của bạn. Một bảng mới có tên là 'products' đã được thêm vào cơ sở dữ liệu của bạn với các trường đã được định nghĩa trong file migration.

Tạo controller

Sau khi đã cơ sở dữ liệu đã sẵn sàng, bước tiếp theo chúng ta sẽ tạo controller. Chạy câu lệnh sau để tạo controller:

php artisan make:controller LiveSearchController

Giờ đi đến app/Http/controller/LiveSearchController.php và chỉnh sửa như sau:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LiveSearchController extends Controller
{
    public function index()
    {
        $products = DB::table('products')->get();

        return view('search.search', compact('products'));
    }

    public function search(Request $request)
    {
        if ($request->ajax()) {
            $output = '';
            $products = DB::table('products')->where('title', 'LIKE', '%' . $request->search . '%')->get();
            if ($products) {
                foreach ($products as $key => $product) {
                    $output .= '