یک TextBox با قابلیت 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); } }); });
نظرات