MySqlPHPایجکس / Ajaxجاوا اسکریپتدیتابیسزبان های برنامه نویسیسورس کدطراحی وبکامپوننت / کتابخانه

ساخت AutoComplete توسط jQuery و PHP و Ajax

autocomplete

یک TextBox با قابلیت AutoComplete در واقع به کاربر این امکان را می دهد که وارد کردن متن جستجو، با زدن هر کلید، مقادیر مرتبط با آن از دیتابیس خوانده شده و به او پیشنهاد می شود.

مانند گزینه های یشنهادی هنگام سرچ گوگل:

autocomplete
autocomplete

برای ساخت یک تسکت باکس AutoComplete از PHP و jQuery و MySql استفاده می کنیم. همچنین با پیاده سازی Ajax هم آشنا می شویم.

مرحله اول – ساخت جدول در دیتابیس

بعنوان مثال می خواهیم مهارت ها یا Skill ها را از جدولی در دیتابیس خوانده و به کاربر پیشنهاد دهیم. برای اینکار با استفاده از کد زیر یک جدول در MySql ایجاد می کنیم:

CREATE TABLE `skills` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `skill` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

مرحله دوم – جاوا اسکریپت

برای استفاده از jQuery و jQueryUI فایل های CSS و JS زیر را در HEAD صفحه قرار می دهیم:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

حالا باید یک تابع توسط جاوا اسکریپت برای خواندن مقادیر از دیتابیس به نام Autocomplete بنویسیم:

<script>
$(function() {
    $("#skill_input").autocomplete({
        source: "search.php",
    });
});
</script>

مرحله سوم – HTML

<div class="auto-widget">
    <p>Your Skills: <input type="text" id="skill_input"/></p>
</div>

مرحله چهارم – PHP

فایلی به نام search.php ایجاد می کنیم و کد زیر را در آن قرار می دهیم.

<?php

// Database configuration
$dbHost     = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName     = 'codexworld';

// Connect with the database
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Get search term
$searchTerm = $_GET['term'];

// Get matched data from skills table
$query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' AND status = '1' ORDER BY skill ASC");

// Generate skills data array
$skillData = array();
if($query->num_rows > 0){
    while($row = $query->fetch_assoc()){
        $data['id'] = $row['id'];
        $data['value'] = $row['skill'];
        array_push($skillData, $data);
    }
}

// Return results as json encoded array
echo json_encode($skillData);

?>

مرحله آخر 

$(function() {
    $("#skill_input").autocomplete({
        source: "search.php",
        select: function( event, ui ) {
            event.preventDefault();
            $("#skill_input").val(ui.item.id);
        }
    });
});

نظرات