Hướng dẫn làm live search với Ajax

Hôm nay mình sẽ hướng dẫn các bạn làm live search, tức là kết quả tìm kiếm sẽ hiển thị nhưng không load lại website. Ajax sẽ là từ khóa của bài viết này :)

Bước 1: Tạo database country với tables country gồm trường id và country.

Bước 2: Xây dựng một số file như sau:

File index.html: form tìm kiếm

File ajax.js: gửi yêu cầu lên server xử lý và hiển thị kết quả trả về

 

File get.php: làm nhiệm vụ nhận request từ client, xử lý tìm kiểm và trả về dữ liệu.

Đối với file get.php bạn cần thay đổi database_username, password và ten_database đúng như database của bạn. Download: source code

Tuần tự xử lý: khi bạn gõ chữ cái vào ô search, sự kiện onkeyup (index.html) sẽ gọi hàm livesearch(ajax.js), hàm livesearch sẽ gửi chữ cái vừa gõ lên server thông qua phương thức get. Server xử lý và trả về. Nhận được kết quả thì hàm process (ajax.js) sẽ hiển thị kết quả.

Đây là hướng dẫn cơ bản, từ đây bạn có thể tùy chỉnh css cho trang search đẹp hơn hoặc hiển thị thêm hình ảnh chẳng hạn.

Hướng dẫn làm live search với Ajax
4.5 (90%) 2 votes
Pin It

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">