آموزش ساخت AutoComplete

تیر ۲۱, ۱۳۹۱ توسط : مادیار

AutoComplete چیست؟

تصویر بالا از یک جستجو در گوگل میباشد که متن درخاستی کامل نشده و گوگل بصورت اتوماتیک پیشنهاداتی به ما میدهد که با متن وارد شده ما تغریباً یا دقیقاً همخانی دارد
این یک AutoComplete میبشاد
در این آموزش میخایم یک AutoComplete ساده بسازیم…

موارد مورد نیاز …
jQuery , PHP

Demo   –  Download

برای شروع , قالب HTML ایجاد میکنیم

توجه داشته باشید قالب بندی دمو و آموزش باهم فرق دارن


 <!DOCTYPE html>
      <html>
          <head>
<meta content="fa" http-equiv="Content-Language">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title> AutoComplete - Live-Net.Ir </title>
          </head>
          <body>
<input name="search" id=mysearch" type="text" onkeyup="sendData();">
<div id="result" style="display:none"></div>
          </body>
 </html>

ساخت کد آجاکس برای ارسال اطلاعات با jQuery.

 function sendData(){
         var $val = $("#mysearch").val();

                 $.post("info.php", {search: $val },
                         function(data) {
                                 $("#result").fadeIn();
                                 $("#result").html( data );
                         });
 }
 

خب تا اینجا ما کاره ساخت قالب و کد اجاکس رو تموم کردیم و چیزه دیگه ای که نیاز داریم یک فایل PHP جهت دریافت اطلاعات و برگرداندن اطلاعات هست

<pre><code>//نام های که جستجو میشوند

 $a[]="Iran";
 $a[]="Tehran";
 $a[]="PHP";
 $a[]="Cinema";
 $a[]="Ehsan";
 $a[]="Farsi";
 $a[]="Ghanon";
 $a[]="Hesar";
 $a[]="Professional";
 $a[]="Javascript";
 $a[]="Kid";
 $a[]="Persian";
 $a[]="Nina";
 $a[]="Saeid";
 $a[]="jQuery";
 $a[]="Amanda";
 $a[]="CSS3";
 $a[]="لایونت";
 $a[]="Doris";
 $a[]="CSS";
 $a[]="آرش";
 $a[]="فارسی";
 $a[]="Tove";
 $a[]="سعید";
 $a[]="دارو";
 $a[]="رضا";
 $a[]="Elizabeth";
 $a[]="Ellen";
 $a[]="Wenche";
 $a[]="HTML";
     // درصورتی که درخاستی ارسال شده بود لیست بالارو چک میکنیم....
     if ( isset ( $_POST['search'] ) )$q=$_POST["search"];
   $hint="";
   // حالا درخاست ارسال شده را چک میکنیم ( حرف اولش رو ) و با اطلاعات بالا مقایسه میکنیم...
 if (strlen($q) > 0)
   {

   for($i=0; $i < count($a); $i++)
     {
     if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
       {
        // اگر اطلاعات وارد شده با اطلاعات ما همخانی داشت آنهارو به کار بر نشان میدهیم :
       if ($hint=="")
         {
         $hint=$a[$i];
         }
       else
         {
         $hint=$hint." <br/> ".$a[$i];
         }
       }
     }
   }

    // در صورتی که اطلاعات وارد شده با اطلاعات ما همخانی نداشت خروجی ما به کاربر : پیشنهادی داده نمیشود
   if ($hint == "")
   {
   $response="پیشنهادی داده نمیشود";
   }
 else
   {
   $response=$hint;
   }
   echo $response;</code>

امید وارم مطلب مفیدی باشه… اگر سوالی بود درخدمتم
لطفا نظرتون رو بگید ممنون

منبع – لایونت

بازدید : ۴۹۷۶

تیر ۲۲, ۱۳۹۱ @ ۸:۲۵ ب.ظ

من برای اولین پروژم خدا بیامرز از این روش یعنی همکاری سمت سرور و کلاینت استفاده کردم ولی حالا که html5 اومده ترجیح میدم از datalist استفاده کنم. اینطوری راحت تره. البته بازم باید از آجاکس بهره بگیری تا بهتر بتونی مدیریتش کنی.

پاسخ دادن
    سعید
    تیر ۲۲, ۱۳۹۱ @ ۸:۵۵ ب.ظ

    به نظر من الان با این اینترنت اکپلورر ۸ ۷ ۶ نمیشه زیاد روی html 5 حساب کرد. خوبی روشهای سنتی اینه که همیشه جواب میده.
    در ضمن به جای لغت نا مانوس و غریب ” آجاکس” از ” ای جکس” استفاده کنیم
    (تلفظ صحیح از ویکی پدیا /ˈeɪdʒæks/ )

    پاسخ دادن
      تیر ۲۲, ۱۳۹۱ @ ۸:۵۸ ب.ظ

      در مورد ای‌جکس راست گفتی. توی یه کتاب خونده بودم ولی فراموش کردم. مرسی. حق با توست.

      در مورد ie لعنتی هم با وجود html5 shiv و کتابخانه هایی مثل modernizr اصلا جای نگرانی نیست. البته نسخه ۶ رو نمیدونم ولی ۷ به بالا اوکیه تقریبا. سعی شده تبدیلات و شناساندن ها کامل صورت بگیره.

      پاسخ دادن
        سعید
        تیر ۲۲, ۱۳۹۱ @ ۹:۰۹ ب.ظ

        چه خوب از وجود این کتابخانه های اطلاع نداشتم مرسی که گفتی.مقاله آموزشی داری در موردشون؟ تا هم خودم یاد بگیرم هم بذارم(یا بذاری) توی سایت تا بقیه دوستان هم استفاده کنن

        پاسخ دادن
        تیر ۲۲, ۱۳۹۱ @ ۱۰:۱۹ ب.ظ

        من خودم شدیداً با IE مشکل دارم! بخاطر IE تغریبا از HTML5 استفده نمیکنم!!
        بخاطر همین . بیشتر از javascript استفده میکنم…
        اگه راهی هست که IE 6,7 هم HTML 5 رو کامل بخونه ک فکر نکنم کامل و بدونه کمو کاستی اجرا کنه 🙂 زود تر آموزش رو بزارید…

        ممنون

        پاسخ دادن
          تیر ۲۳, ۱۳۹۱ @ ۶:۲۰ ق.ظ

          مرورگر های قدیمی قاعدتا از تکنولوژی روز پشتیبانی نمیکنن. مثل IE6 اما راه هایی هست که تقریبا بشه تکنولوژی رو بهشون شناسوند. HTML5 shiv دقیقا همین کارو انجام میده. برچسب های جدید رو که در نگارش ۷ این زبان بوجود اومده رو به ie اگر نشناسه خواهد شناسوند.
          البته این هم ذکر کنم که مرورگری مثل ie6 از هر برچسبی مثل که وجود خارجی نداره باز پشتیبانی میکنه. اما به دلیل اینکه نمیشناستش بهش استایل تعلق نمیگیره. برای همین چنین ابزار هایی کاربردین.
          ایشاالله بزودی در مورد این ابزار ها بحث مفصلی خواهیم داشت.

مجید
تیر ۲۳, ۱۳۹۱ @ ۱۲:۳۷ ق.ظ

Aesheghetam ! Ali bud in amouzesh!
Faghat ye chizi dg!
Man To barname nevisi PHP taze varedam.
Hala age bekhaim $a[] ro az data base begirim chikar bayad bokonim ?

پاسخ دادن
    تیر ۲۳, ۱۳۹۱ @ ۶:۱۲ ق.ظ

    شما کافیه فهرست اون داده هاتون رو از جدول واکشی کنید بعد درون یک آرایه قرار بدید.

    پاسخ دادن
      مجید
      تیر ۲۹, ۱۳۹۱ @ ۲:۲۵ ب.ظ

      Hala ini k shoma migid chi hast?!
      man query o migiram fetch mikonam ba while ()

      mesal : while ( $z = query ) {

      $a = query['name']

      }
      vali response nemide!

      پاسخ دادن
        علی
        خرداد ۲۹, ۱۳۹۳ @ ۱:۰۸ ق.ظ

        خب ، برای این کخ کار خودتو راحت کنی یه var_dump از ورودی بگیر تا ببینی ساختار آرای ورودی به چه صورته :
        var_dump ( $_POST );

        پاسخ دادن
آذر ۷, ۱۳۹۳ @ ۱:۵۳ ب.ظ

خوب من کمی تفکر نموده و فکر میکنم این کار رو میشه جوری انجام داد که فیلد هارو از دیتا بیس بگیره.

میشه آیاااااا
میییشههههه؟

پاسخ دادن
    Saeed Moqadam
    آذر ۲۴, ۱۳۹۳ @ ۹:۱۱ ب.ظ

    ۱۰۰ درصد 🙂

    پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*