TÌM KIẾM THÔNG MINH VỚI TYPEAHEAD TRONG LARAVEL

Trong những website lớn, những phần tìm kiếm hay nhập liệu rất cần những tính năng mưu trí như gợi ý dựa trên những từ nhập vào, nó giúp nâng cao thưởng thức người dùng, giúp tìm kiếm và nhập liệu trở lên đơn thuần hơn. Google là một dẫn chứng không cần phải bàn cãi cho yếu tố này .
Những năm đầu của thế kỉ XXI, Google Open với chỉ duy nhất một ô tìm kiếm và tính năng gợi ý ngay lập tức khi từ khóa được gõ vào, nó đã giúp người dùng xu thế được ngay khi chỉ gõ vào 1-2 từ trong từ khóa cần tìm kiếm. Ở thời gian đó, gợi ý khi tìm kiếm là một tính năng phức tạp và xa xỉ, nhưng khi công nghệ phần mềm tăng trưởng, đặc biệt quan trọng với ứng dụng mã nguồn mở, những tính năng như vậy thật đơn thuần để triển khai .
Trong bài viết này, Hybrid Technologies sẽ cùng bạn triển khai những tìm kiếm mưu trí hay gợi ý nhập liệu sử dụng thư viện Typeahead là một gói ứng dụng mã nguồn mở của Twitter trong những ứng dụng Laravel .

Giới thiệu về Typeahead

Typeahead.js là một thư viện Javascript rất linh hoạt, nó có thể làm nền tảng tốt để xây dựng các tính năng tìm kiếm gợi ý thông minh. Typeahead bao gồm hai thành phần: Typeahead: Phần chuyên xử lý giao diện người dùng

• Hiển thị gợi ý đến người dùng ngay khi họ nhập liệu
• Hiển thị những gợi ý ngay trên ô nhập liệu
• Hỗ trợ những tùy chỉnh giao diện linh động
• Highlight những từ khóa trùng khớp trong phần gợi ý
• Kích hoạt những sự kiện tùy chỉnh được cho phép lan rộng ra những giải quyết và xử lý
• Bloodhound : Bộ máy gợi ý nâng cao
  • Cho phép những tài liệu được hardcode
  • Lấy tài liệu từ trước để giảm độ trễ khi gợi ý
  • Sử dụng Local Storage giảm số lượng những request đến sever .
  • Sử dụng rate limit và bộ đệm cho những request đến sever làm giảm nhẹ tải tài liệu

Bộ máy gợi ý Bloodhound sẽ được sử dụng để thống kê giám sát hiệu quả với những truy vấn cho trước và Typeahead sẽ sử dụng để render ra mã HTML. Cả hai thành phần này là độc lập, trong bài viết này tất cả chúng ta sẽ sử dụng cả hai để xây dựng công cụ tìm kiếm gợi ý mưu trí .

Cài đặt Typeahead

Trước khi đi vào sử dụng Typeahead tất cả chúng ta cần setup gói thư viện này, có ba phương pháp để thiết lập .
Sử dụng npm

npm i typeahead

Tải gói thư viện dạng file zip
Vào đường dẫn Github của Typeahead chọn Clone or tải về và click vào Download zip. Giải nén ra tất cả chúng ta sẽ thấy trong thư mục dist có những file như sau :

• bloodhound.js ( chỉ có thành phần Bloodhound ) .
• typeahead.bundle.js ( Bao gồm cả Typeahead và Bloodhound ) .
• typeahead.jquery.js ( chỉ có thành phần Typeahead ) .

Các file có thêm min.js là những file được tối ưu hóa dung tích .
Tích hợp trải qua CDN
Sử dụng CDN giúp file hoàn toàn có thể được tải về nhanh hơn, tuy nhiên cũng gặp phải một yếu tố là khi cá mập cắn cáp, internet chập chờn nếu những CDN không có server ở gần Nước Ta thì những thư viện này rất khó để tải về .

Khởi tạo Typeahead

• Typeahead có nhiều cách khởi tạo và sau đây là cách khởi tạo hay dùng nhất jQuery # typeahead ( options, [ * datasets ] ). Tính năng typeahead được vận dụng cho những input dạng text input [ type = ” text ” ] có hai tham số cho khởi tạo : options là những tùy chọn thông số kỹ thuật, 1 số ít giá trị cần chăm sóc như sau :

  • highlight: thêm thẻ  vào các từ trùng khớp trong phần gợi ý. Mặc định là false.

  • hint : hiển thị cả từ gợi ý trong ô nhập liệu, mặc định true .
  • minLength : Số ký tự tối thiểu cần nhập khi tính năng gợi ý được khởi đầu, mặc định là 1 .
  • classNames : Cho phép sử dụng tên class khác với mặc định .
• dataset : một typeahead hoàn toàn có thể có nhiều dataset, ví dụ khi bạn tìm kiếm trong một trang bán hàng hoàn toàn có thể trả về gợi ý cho cả loại sản phẩm và những tin tức tương quan đến loại sản phẩm. Các dataset có một số ít những tùy chọn thông số kỹ thuật như sau :
  • name : tên của dataset .
  • source : nguồn tài liệu dùng cho gợi ý, hoàn toàn có thể là một instance của Bloodhound, như ở phần đầu tất cả chúng ta có nói Typeahead chỉ giải quyết và xử lý giao diện người dùng và Bloodhound với là cỗ máy thực thi những gợi ý .
  • limit : Số gợi ý tối đa sẽ được hiển thị, mặc định là 5 .

USD ( " # navbar-search-input " ). typeahead ( { hint : true, highlight : true, minLength : 1 } ) ;

Khởi tạo Bloodhound

Bloodhound là cỗ máy gợi ý cho Typeahead. js, sử dụng thành phần này mang lại nhiều tính năng nâng cao hơn vì nó hoàn toàn có thể lấy tài liệu từ một nguồn remote và sử dụng bộ đệm để tăng cường .

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

Chúng ta sẽ thiết lập đường dẫn / find ? q = trong phần Laravel, datumTokenizer cần một mảng JSON. Như vậy, tất cả chúng ta đã có tài liệu và hoàn toàn có thể sử dụng nó cho thiết lập source của typeahead như sau :

source : engine. ttAdapter ( )

Tạo mẫu cho những gợi ý

Typeahead được cho phép sử dụng những template để đổi khác kiểu mẫu cho những gợi ý, bạn cũng hoàn toàn có thể sử dụng bootstrap để style :

templates: {
    empty: [
        '
Không có kết quả phù hợp.
'
    ],
    header: [
        '
'
    ],
    suggestion: function (data) {
         return '' + data.name + ''
    }
}

Code hoàn hảo cho Typeahead. js

jQuery(document).ready(function($) {
    var engine = new Bloodhound({
        remote: {
            url: 'api/customer?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 + ''
      }
        }
    });
});

Xây dựng backend với Laravel

Cài đặt thiên nhiên và môi trường Laravel

Tham khảo công cụ Laragon setup nhanh thiên nhiên và môi trường Laravel, tất cả chúng ta tạo ra một thiên nhiên và môi trường test có tên là typeahead và Laragon tự động hóa tạo ra tên miền ảo typeahead.dev. Laragon cũng tự động hóa tạo ra database tên typeahead cho tất cả chúng ta. Việc tiên phong là thiết lập file. env :

DB_CONNECTION = mysql DB_HOST = 127.0.0.1 DB_PORT = 3306 DB_DATABASE = typeahead DB_USERNAME = root DB_PASSWORD = secret

Tạo bảng Customer và tài liệu mẫu

Tạo ra Model Customer cùng với file migrate thông qua câu lệnh artisan make:model 

D : Laragonwwwtypeahead λ php artisan make : Model Customer - m Model created successfully. Created Migration : 2017_09 _04_084521_create_customers_table

Chỉnh sửa file migrate xxx_create_customers_table. php trong thư mục databasemigrations :

php use IlluminateSupportFacadesSchema ; use IlluminateDatabaseSchemaBlueprint ; use IlluminateDatabaseMigrationsMigration ; class CreateCustomersTable extends Migration { < p / * * * Run the migrations. * * @ return void * /
    public function up()
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name', 255);
            $table->string('address', 255);
            $table->string('phone', 255);
            $table->timestamps();
        });
    }

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

D : Laragonwwwtypeahead λ php artisan migrate Migration table created successfully. Migrating : 2014_10 _12_000000_create_users_table Migrated : 2014_10 _12_000000_create_users_table Migrating : 2014_10 _12_100000_create_password_resets_table Migrated : 2014_10 _12_100000_create_password_resets_table Migrating : 2017_09 _04_084521_create_customers_table Migrated : 2017_09 _04_084521_create_customers_table

D : Laragonwwwtypeahead λ php artisan make : seeder CustomersTableSeeder Seeder created successfully .

php use FakerGenerator as Faker ; USD factory - define ( AppCustomer :: class, function ( Faker $ faker ) { return [ ' name ' => USD faker -> name, ' address ' => USD faker -> address, ' phone ' => USD faker -> phoneNumber ] ; } ) ;

D : Laragonwwwtypeahead λ php artisan make : seeder CustomersTableSeeder Seeder created successfully .

php use IlluminateDatabaseSeeder ; class CustomersTableSeeder extends Seeder { < p / * * * Run the database seeds. * * @ return void * /
    public function run()
    {
        factory(Customer::class, 10000)->create();
    }
}

php use IlluminateDatabaseSeeder ; class DatabaseSeeder extends Seeder { < p / * * * Run the database seeds. * * @ return void * /
    public function run()
    {
        $this->call(CustomersTableSeeder::class);
    }
}

D : Laragonwwwtypeahead λ php artisan db : seed Seeding : CustomersTableSeeder

Route :: get ( ' find ', ' SearchController @ find ' ) ;

Route :: get ( ' customer / { id } ', function ( ) { USD customer = Customer :: find ( USD id ) ; return USD customer -> name. ' @ '. USD customer -> phone. ' - '. USD customer -> address ; } ) ;

D : Laragonwwwtypeahead λ php artisan make : controller SearchController Controller created successfully .

php namespace AppHttpControllers ; use IlluminateHttpRequest ; use AppCustomer ; class SearchController extends Controller { public function find ( Request $ request ) { USD customer = Customer :: where ( ' name ', ' like ', ' % '. USD request - get ( ' q ' ). ' % ' ) -> get ( ) ; return response ( ) -> json ( USD customer ) ; } }

    
        
        
        
        
        
        
        

        HTML5 shim and Respond. js for IE8 tư vấn of HTML5 elements and truyền thông queries
        [ if lt IE 9 ] > < script src = " https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js " > < / script > < script src = " https://oss.maxcdn.com/respond/1.4.2/respond.min.js " > < / script > < ! [ endif ]
        
    
    
        Fixed navbar
        

        Begin page content
        

            

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

                

                    

                        

                            
                        
                        Tìm kiếm
                    
                
            
        

        
        
        
        
        
    

Xem thêm: Cách đánh số trang trong Word 2010 cực nhanh, cực đơn giản

Source: https://www.lesabeilles.biz
Category: Mạng Internet