/ / Javascript & Jquery, Php cơ bản / Comments (5)

Gợi ý từ khóa tìm kiếm với Autocomplete jQuery kết hợp PHP

Chắc các bạn đã từng nhìn thấy nhiều website sử dụng chức năng gợi ý từ khóa tìm kiếm rồi phải không nào.Trong bài viết này mình sẽ hướng dẫn sử dụng thư viện Autocomplete trong jQuery UI để thực hiện việc này.Đây là chức năng khá tiện lợi cho người sử dụng nó cho phép gợi ý các từ khóa có sẵn trên hệ thống.

Gợi ý từ khóa tìm kiếm với Autocomplete jQuery kết hợp PHP

Gợi ý từ khóa tìm kiếm với Autocomplete jQuery kết hợp PHP

Gợi ý từ khóa AutoComplete jQuery trong tìm kiếm dữ liệu bằng php và mysql

– Chúng ta sẽ sử dụng thư viện này thông qua ví dụ và các bước làm ở dưới nhé.
– Bước 1: Trước tiên chúng ta sẽ gọi thư viện jQuery và thư viện jQuery UI phiên bản mới nhất về nhé:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

– Bước 2: Tiếp theo chúng ta sẽ tạo ra form tìm kiếm dữ liệu nhé:

<form method="get" id="form_search">
    <table>
        <tr>
            <td>
                <input type="text" name="key" id="key" style="width:400px" placeholder="Tìm kiếm tỉnh thành Việt Nam..." />
            </td>
        </tr>
        <tr>
            <td align="center">
                 <button id="button_search" type="submit">Tìm kiếm</button>
            </td>
        </tr>
    </table>
</form>

– Bước 3: Xây dựng code jQuery ajax để thực hiện cấu hình Autocomplete jQuery và gửi dữ liệu sang trang tìm kiếm

<script type="text/javascript">
$(document).ready(function()
{	
	//sử dụng autocomplete với input có id = key
	$( "input#key" ).autocomplete({
        source:'search.php', //link xử lý dữ liệu tìm kiếm
    })
});
</script>

Với phần cấu hình ở trên khi thực hiện gõ từ khóa vào input có id = key thì nó sẽ thực hiện chức năng autocomplete gợi ý từ khóa tìm kiếm,và dữ liệu sẽ được lấy từ trang search.php
– Bước 4: Xây dựng trang tìm kiếm dữ liệu search.php

<?php
//neu tồn tại biến term từ gửi sang
if(isset($_GET['term']))
{
    //lay từ khóa cần tìm kiếm
    $key = $_GET['term'];
    
    //cau hinh thong tin ket noi CSDL
   //Kết nối tới csdl
    $conn = mysql_connect("localhost", "root", "") or die("can't connect database");
    //Lựa chọn csdl và cho phép hiển thị mã utf8
    mysql_select_db("autocomplete",$conn);
    mysql_query("SET NAMES 'utf8'");
    
    //cau lenh truy van tim kiem voi tu khoa
    $req = "SELECT name "
        . "FROM city "
            . "WHERE name LIKE '%" . $key . "%' ";
    
    $query = mysql_query($req);
    
    while ($row = mysql_fetch_array($query)) {
        $results[] = array('label' => $row['name']);
    }
    //trả về dữ liệu dạng json
    echo json_encode($results);
}

Khi chúng ta sử dụng Autocomplete thì biến dữ liệu sẽ được gửi sang trang search.php thông qua biến term theo phương thức GET



25/02/2016
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

Bài viết chùng chuyên mục

5 Comments

  1. trung says:
     /  Reply

    sao e submit form tìm kiếm nó không hiển thị nhỉ,cảm ơn a bài viết bổ ích.

    • nobitacnt says:
       /  Reply

      ở ví dụ trên mình hướng dẫn cách sử dụng Autocomplete jQuery,còn bạn submit form thì gắn link action cho form tìm kiếm và thực hiện tìm kiếm ở trang action đó,nó cũng giống y như trang search.php thôi bạn ah.

      • trung says:
         /  Reply

        ok,thanks a nhe

  2. Bill says:
     /  Reply

    Bạn cho hỏi cái term ở đâu ra thế ? (isset($_GET[‘term’]))

    • nobitacnt says:
       /  Reply

      mặc định Autocomplete nó gửi dữ liệu qua cái biến đó, lên khi bạn nhận dữ liệu từ thư viện này thì nhận qua biến đó nhé.

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL