دانلود آموزش و سورس کد جستجوی اتوماتیک با استفاده از jquery در php

دانلود آموزش و سورس کد جستجوی اتوماتیک با استفاده از jquery در php

در این پست سورس و آموزش جستجوی اتوماتیک با استفاده از jquery در php را برای شما قرار داده ایم.

در آموزش های قبلی به صورت کامل در مورد استفاده از تکنولوژی Ajax در php صحبت شد که در آن آموزش با استفاده از جاوا اسکریپت این کار صورت گرفته بود.

این جستجوی اتوماتیک به این صورت است که یک جدول با دو فیلد Id و Username در پایگاه داده mysql ایجاده کرده ایم و تعدادی نام کاربری برای آن وارد کرده ایم. در صورتی که کاربر با وارد کردن یک کاراکتر یا چندین کاراکتر به صورت اتوماتیک در بین نام کاربری در پایگاه داده جستجو کرده و نام کاربری های که در آنها کاراکترهای مشابه وجود داشته باشد را نمایش می دهد.

در این آموزش ما با استفاده از 2 کتابخانه JQuery و JQuery Ui رو به همراه شیوه نامه ی jquery-ui.min.css جستجوی اتوماتیک را نوشته ایم. در این جستجو ما از دیتابیس نیز استفاده کرده ایم.

ما برای برای راحتی هرچه بهتر کاربران در بین کد ها به صورت کامل در مورد کدها توضیح داده ایم

کد های صفحه index.php

<!doctype html>
<html lang="fa">
  <head>
    <meta charset="UTF-8">
      <title>جستجوی اتوماتیک</title>
      <style>
        body{
        background:#eee;
        width:50%;
        margin:0 auto;
        }
        input{
        margin-top:10%;
        height:40px;
        width:100%;
        padding:10px;
        font-size:30px;
        }
        h1{
        direction:rtl;
        text-align:center;
        font-size:22px;
        }
      </style>

      <!-- استایل دهی به لیست نتایج -->
      <link rel="stylesheet" href="jquery-ui.min.css" type="text/css" />

    </head>
  <body>
    <h1>جستجوی اتوماتیک</h1>


    <!-- یک فیلد ورودی که البته می تواند داخل یک فرم باشد -->
    <input type='text' name='Username' value='' class='auto'>


      <!-- کتابخانه های جی کوئری -->
      <script type="text/javascript" src="jquery.min.js"></script>
      <script type="text/javascript" src="jquery-ui.min.js"></script>


      <!-- فراخوانی تابع اصلی + استفاده از سلکتور فیلد ورودی -->
      <script type="text/javascript">
        $(function() {
        $(".auto").autocomplete({
        source: "search.php", // محل خوراک تابع که باید از فرمت استاندارد JSON پشتیبانی کند
        minLength: 1 //محدودیت تعداد کاراکترها کاربر تا نمایش لیست...
        });

        });
      </script>
    </body>
</html>

کد های صفحه search.php

<?php
define('DB_SERVER', 'localhost');////نام سرور
define('DB_USER', 'root');//نام کاربری دیتابیس
define('DB_PASSWORD', '');//رمز عبور دیتابیس
define('DB_NAME', 'AutoSearch'); //نام دیتابیس


if (isset($_GET['term'])){ //شرط دریافت متد GET از URL. اگر url در خواستی به این فایل، دارای متد Get و نام term نباشد، هیچ اتفاقی نخواهد افتاد.
	$return_arr = array();
 
	try { //تلاش برای انجام فرآیندها...
	    $conn = new PDO("mysql:host=".DB_SERVER.";dbname=".DB_NAME, DB_USER, DB_PASSWORD); // //ایجاد اتصال به پایگاه داده
	    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //تعیین ویژگی های برخورد با خطا
	    $conn->exec("set names utf8");//این خط برای پشتیبانی از رشته های utf8 که فارسی هم در این دسته قرار داره نوشته شده.
	    
	    $stmt = $conn->prepare('SELECT Username FROM Users WHERE Username LIKE :term'); //فراهم آوردی اطلاعات مورد نظر از ستون Username و جدول Users. برای ایجاد مشابهت، حتما باید از دستور like در Sql استفاده کنیم.
	    $stmt->execute(array('term' => '%'.$_GET['term'].'%')); //این خط، فراهم آوری اطلاعات بالا رو اجرا میکنه و به متغیر :term که در قطعه کد بالا نوشته شده بود، محتوای متد GET رو مقدار دهی میکنه.
	    
	    while($row = $stmt->fetch()) {//ایجاد یک حلقه و ذخیره کردن اطلاعات هر سطر در متغیر row.
	        $return_arr[] =  $row['Username']; //نتایج ستون Username در آرایه return_arr ذخیره می شود.
	    }
 
	} catch(PDOException $e) { //در صورت ایجاد خطا در مرحله try، این بخش اجرا شده و متن خطا چاپ میشود.
	    echo 'ERROR: ' . $e->getMessage();
	}
 
    echo json_encode($return_arr); //چاپ نتایج آرایه return_arr به فرمت استاندارد JSON
}
?>

خروجی جستجوی اتوماتیک

نحوه اجرای وب سایت در wamp :

پس از دانلود پروژه و خارج کردن آن از حالت فشرده که حاوی دو پوشه می باشد پوشه autosearch که پایگاه داده سورس کد می باشد.
در مسیر C:\wamp\bin\mysql\mysql5.6.12\data کپی کنید. سپس پوشه
Autocomplete-With-Jquery-in-php_www.iranganj.ir را در مسیر C:\wamp\www کپی کرده و سپس wamp را اجرار کرده تا خروجی را مشاهده کنید.

نحوه اجرای فایل sql در phpmyadmin

همچنین فایل sql دیتابیس نیز قرار داده شده که می توانید در صورت کار نکردن روش بالا فایل sql را اجرا کنید. برای این کار ابتدا phpmyadmin را اجرا کنید و سپس گزینه Import را انتخاب کنید و سپس فایل sql را از طریق گزینه Choose File انتخاب و روی گزینه Go کلیک کنید تا دیتابیس ایجاد شود.

نویسنده	حسین فتحی
گروه مطلب	PHP
نوع مطلب	سورس کد و آموزش
تاریخ انتشار	۲۲ شهریور ۱۳۹۳
منبع	ایران گنج
تعداد نظرات	۰
قیمت	کاربران VIP
توضیح	توجه: زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد. برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید. برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید. لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید. برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.
برای مشاهده لینک های دانلود کلیک کنید حجم فایل ها 1MB دانلود - کاربران VIP سایت - مربوط به همین مطلب
خرید VIP امکان خرید از درگاه های بانکی و حساب مجازی برای دانلود بعد از خرید به همین صفحه برگردید تا لینک های دانلود نمایش داده شود