Hướng dẫn search bar php mysql

• Trang chủ
• Lập trình PHP
• PHP MySQL Ajax Live Search

Trong hướng dẫn này, bạn sẽ học cách tạo tính năng tìm kiếm cơ sở dữ liệu MySQL trực tiếp bằng PHP và Ajax.

Tìm kiếm cơ sở dữ liệu bằng Ajax

Bạn có thể tạo một chức năng tìm kiếm cơ sở dữ liệu trực tiếp đơn giản bằng cách sử dụng Ajax và PHP, nơi kết quả tìm kiếm sẽ được hiển thị khi bạn bắt đầu nhập một số ký tự vào hộp nhập tìm kiếm.

Trong hướng dẫn này, chúng tôi sẽ tạo một hộp tìm kiếm trực tiếp sẽ tìm kiếm bảng quốc gia và hiển thị kết quả không đồng bộ. Tuy nhiên, trước hết chúng ta cần tạo bảng này.

Bước 1: Tạo bảng cơ sở dữ liệu

Thực thi truy vấn SQL sau để tạo bảng quốc gia trong cơ sở dữ liệu MySQL của bạn.

Ví dụ

CREATE TABLE countries [
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR[50] NOT NULL
];

Sau khi tạo bảng, bạn cần phải cung cấp cho nó với một số dữ liệu bằng cách sử dụng lệnh SQL INSERT . Ngoài ra, bạn có thể sử dụng dữ liệu chúng tôi cung cấp bên dưới và nhập nó vào cơ sở dữ liệu MySQL của bạn.

Ví dụ

-- phpMyAdmin SQL Dump
-- version 4.1.14
-- //www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: May 08, 2017 at 09:14 AM
-- Server version: 5.6.17
-- PHP Version: 5.5.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `demo`
--

-- --------------------------------------------------------

--
-- Table structure for table `countries`
--

CREATE TABLE IF NOT EXISTS `countries` [
  `id` int[3] NOT NULL AUTO_INCREMENT,
  `name` varchar[35] NOT NULL,
  PRIMARY KEY [`id`],
  UNIQUE KEY `name` [`name`]
] ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=130 ;

--
-- Dumping data for table `countries`
--

INSERT INTO `countries` [`id`, `name`] VALUES
[1, 'Afghanistan'],
[2, 'Albania'],
[3, 'Algeria'],
[4, 'Angola'],
[5, 'Argentina'],
[6, 'Armenia'],
[7, 'Australia'],
[8, 'Austria'],
[9, 'Bahrain'],
[10, 'Bangladesh'],
[11, 'Belarus'],
[12, 'Belgium'],
[13, 'Bhutan'],
[14, 'Bolivia'],
[15, 'Bosnia & Herzegovina'],
[16, 'Botswana'],
[17, 'Brazil'],
[18, 'Bulgaria'],
[19, 'Cambodia'],
[20, 'Cameroon'],
[21, 'Canada'],
[22, 'Chile'],
[23, 'China'],
[24, 'Colombia'],
[25, 'Costa Rica'],
[26, 'Croatia'],
[27, 'Cuba'],
[28, 'Cyprus'],
[29, 'Czech Republic'],
[30, 'Denmark'],
[31, 'Ecuador'],
[32, 'Egypt'],
[33, 'Estonia'],
[34, 'Ethiopia'],
[35, 'Fiji'],
[36, 'Finland'],
[37, 'France'],
[38, 'Germany'],
[39, 'Ghana'],
[40, 'Greece'],
[41, 'Greenland'],
[42, 'Guinea'],
[43, 'Guyana'],
[44, 'Haiti'],
[45, 'Honduras'],
[46, 'Hong Kong'],
[47, 'Hungary'],
[48, 'Iceland'],
[49, 'India'],
[50, 'Indonesia'],
[51, 'Iran'],
[52, 'Iraq'],
[53, 'Ireland'],
[54, 'Israel'],
[55, 'Italy'],
[56, 'Japan'],
[57, 'Jersey'],
[58, 'Jordan'],
[59, 'Kazakhstan'],
[60, 'Kenya'],
[61, 'Kuwait'],
[62, 'Kyrgyzstan'],
[63, 'Lebanon'],
[64, 'Liberia'],
[65, 'Libya'],
[66, 'Lithuania'],
[67, 'Luxembourg'],
[68, 'Macedonia'],
[69, 'Madagascar'],
[70, 'Malaysia'],
[71, 'Maldives'],
[72, 'Mali'],
[73, 'Mauritius'],
[74, 'Mexico'],
[75, 'Monaco'],
[76, 'Mongolia'],
[77, 'Morocco'],
[78, 'Namibia'],
[79, 'Nepal'],
[80, 'Netherlands'],
[81, 'New Zealand'],
[82, 'Nigeria'],
[83, 'North Korea'],
[84, 'Norway'],
[85, 'Oman'],
[86, 'Pakistan'],
[87, 'Panama'],
[88, 'Papua New Guinea'],
[89, 'Paraguay'],
[90, 'Peru'],
[91, 'Philippines'],
[92, 'Poland'],
[93, 'Portugal'],
[94, 'Qatar'],
[95, 'Romania'],
[96, 'Russia'],
[97, 'Rwanda'],
[98, 'Saudi Arabia'],
[99, 'Serbia'],
[100, 'Singapore'],
[101, 'Slovakia'],
[102, 'Slovenia'],
[103, 'South Africa'],
[104, 'South Korea'],
[105, 'Spain'],
[106, 'Sri Lanka'],
[107, 'Sudan'],
[108, 'Sweden'],
[109, 'Switzerland'],
[110, 'Syria'],
[111, 'Taiwan'],
[112, 'Tajikistan'],
[113, 'Tanzania'],
[114, 'Thailand'],
[115, 'Tunisia'],
[116, 'Turkey'],
[117, 'Turkmenistan'],
[118, 'Uganda'],
[119, 'Ukraine'],
[120, 'United Arab Emirates'],
[121, 'United Kingdom'],
[122, 'United States'],
[123, 'Uruguay'],
[124, 'Uzbekistan'],
[125, 'Venezuela'],
[126, 'Vietnam'],
[127, 'Yemen'],
[128, 'Zambia'],
[129, 'Zimbabwe'];

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Hãy kiểm tra các hướng dẫn về Tạo bảngcho các thông tin chi tiết về cú pháp để tạo bảng trong hệ thống cơ sở dữ liệu MySQL.

Bước 2: Tạo biểu mẫu tìm kiếm

Bây giờ, hãy tạo một giao diện web đơn giản cho phép người dùng tìm kiếm trực tiếp tên của các quốc gia có sẵn trong bảng quốc gia của chúng tôi , giống như tự động điền hoặc lỗi đánh máy.

Tạo một tệp PHP có tên "search-form.php" và đặt đoạn mã sau vào bên trong nó.

Ví dụ

PHP Live MySQL Database Search

    body{
        font-family: Arail, sans-serif;
    }
    /* Formatting search box */
    .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }



$[document].ready[function[]{
    $['.search-box input[type="text"]'].on["keyup input", function[]{
        /* Get input value on change */
        var inputVal = $[this].val[];
        var resultDropdown = $[this].siblings[".result"];
        if[inputVal.length]{
            $.get["backend-search.php", {term: inputVal}].done[function[data]{
                // Display the returned data in browser
                resultDropdown.html[data];
            }];
        } else{
            resultDropdown.empty[];
        }
    }];
    
    // Set search input value on click of result item
    $[document].on["click", ".result p", function[]{
        $[this].parents[".search-box"].find['input[type="text"]'].val[$[this].text[]];
        $[this].parent[".result"].empty[];
    }];
}];



    

        
        

    

Mỗi khi nội dung của đầu vào tìm kiếm bị thay đổi hoặc sự kiện keyup xảy ra trên thẻ input tìm kiếm, mã jQuery [ dòng từ 47 đến 67 ] đã gửi một yêu cầu Ajax đến tệp "backend-search.php" để truy xuất các bản ghi từ bảng countries liên quan đến cụm từ đã tìm kiếm. Các bản ghi đó sau này sẽ được chèn vào bên trong