ساخت Auto Complete با PHP و jQuery

  • آپدیت شده در تاریخ

ساخت Auto Complete با PHP و jQuery

فیلد های ورودی متن با قابلیت Autocomplete در پروژه های تحت وب بسیار کاربرپسند هستند.

برای همین در این آموزش قصد داریم به شما نحوه ساخت Auto Complete با PHP و jQuery را نمایش بدیم. نمونه معروف این autocomplete ها در جستجوی گوگل دیدید .با استفاده از jQuery UI براحتی می توانید موارد پیشنهادی را از دیتابیس خوانده و به صورت لیست شده در زیر فیلد های ورودی کاربر (تکست باکس textbox) نمایش بدید .

خب آموزش ساخت Auto Complete با PHP و jQuery را شروع کنیم.

در اینجا قصد نمایش مهارت ها(skills) در لیست نمایش داده شده را داریم .همین که کاربر شروع به وارد کردن مهارت ها (متن) کند , مهارت های پیشنهادی به صورت لیست شده نمایش داده میشود.

این متن های پیشنهادی از جدول skilles خوانده و نمایش داده خواهند شد .

کتابخانه جی کویری و جی کویری UI

اول از همه نیاز داریم که کتابخانه jQuery و jQuery UI را فراخوانی کنیم .

بعد از آن تابع autocomplete را تعریف و فایل php منبع را مشخص می کنیم.

صفحه HTML

فقط یک input ساده برای دریافت ورودی کاربر ایجاد می کنیم .

فایل PHP منبع

می توانیم ورودی کاربر را از طریق فیلد  term از کویری استرینگ (query string) دریافت کنیم . خالا اطلاعات مربوطه را از جدول skills را بر اساس متن وارد شده از کاربر می خوانیم.

به اینصورت که در کویری SQL خود از تابع LIKE به معنی شبیه برای دریافت سطر هایی که دارای کلمه وارد شده توسط کاربر است استفاده می کنیم .

در آخر ما خروجی را به صورت داده json برگشت می دهیم .

کد php برای اتصال به دیتابیس و دریافت لیست موارد match شده به صورت زیر است :

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

نحوه اتصال به دیتابیس با mysqli در php

خب کار ساخت Auto Complete با PHP و jQuery اینجا تمام شد . دیدید به چه سادگی با کتابخانه jQuery و یک کویری ساده SQL این قابلیت را که در جستجوی گوگل نیز وجود دارد را پیاده سازی کردیم .

برای دانلود سورس کد کامل ساخت Auto Complete با PHP و jQuery و mysql + فایل از skills.sql قسمت زیر اقدام کنید

هرگونه مشکلی در پیاده سازی کدها داشتید ، از قسمت نظرات اقدام کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲۳)

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

  1. محمود رنجبر ۱۶ دی ۱۳۹۹

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

    پاسخ
  2. محمود رنجبر ۱۵ دی ۱۳۹۹

    سلام حسن جان من از owl carousel تو پروژم استفاده کردم یه ماهی بود درست کار میکرد اما امروز بهم ریخت وبعد هم نشون نداد دیگه در مرورگر کروم ولی در مرورگر اپرا درست نشون میده علت چیه به نظرتون

    پاسخ
    1. حسن شفیعی ۱۵ دی ۱۳۹۹

      سلام.
      اطلاع ندارم. آخرین ورژن را از سایت اصلی دانلود و بروزرسانی کنید

      پاسخ
      1. محمود رنجبر ۱۶ دی ۱۳۹۹

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

        پاسخ
  3. محمود رنجبر ۲۲ آذر ۱۳۹۹

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

    پاسخ
  4. محمود رنجبر ۲۱ آذر ۱۳۹۹

    سلام مهندس شفیعی من هنگام ساخت autocomplete هیچ خطایی ندارم در بخش کنسول با متد get مقدار term ارسال میشه و در بخش network پاسخ هم دریافت میشه اما نتیجه زیر تگ input نمایش داده نمیشه لطفا راهنمایی کنید

    پاسخ
    1. حسن شفیعی ۲۱ آذر ۱۳۹۹

      سلام.
      این کد رو به تگ head صفحه index.php اضافه کنید مشکل حل میشه چون مخفی می شد نمایش نمی داد با این استایل مشکل حل میشه

      موفق باشید.

      پاسخ
      1. محمود رنجبر ۲۱ آذر ۱۳۹۹

        سلام مهندس شفیعی بازم نشون نداد چیکار کنم

        پاسخ
      2. حسن شفیعی ۲۱ آذر ۱۳۹۹

        سلام. بنده چک کردم امکان نداره نشون نده.
        شما از دانلود باکس یکبار دانلود کنید و بدون تغییر اجرا کنید البته باید فایل دیتابیس رو ایمپورت کنید و اطلاعات دیتابیس را هم در فایل تفییر بدید تا کانکشن برقرار بشه و بعد داخل اینپوت یک c بنویسید و نتیجه رو ببینید.

        پاسخ
      3. محمود رنجبر ۲۲ آذر ۱۳۹۹

        سلام مهندس شفیعی گل من autocomplete رو از دانلود باکس دانلود کردم درست کار میکنه ولی اون که خودم نوشتم تو قسمت response کل تگ های صفحه source رو نشون میده ولی مال شما فقط همون اطلاعات جدول رو نشون میده این مشکل من به کجا بر میگرده چطوری درستش کنم عکساشو تو واتس اپ براتون فرستادم ممنون از راهنمایی هاتون

        پاسخ
      4. حسن شفیعی ۲۲ آذر ۱۳۹۹

        سلام.
        این موارد که توی واتساپ بررسی نمیشه.
        اینجا بر میگرده که احتمالا کویری sql شما جوری هست که اگر حتی مقدار خالی باشه کل اطلاعات جدول رو برمیگردونه یا اینکه اطلاعات غیرضروری مثل تگ ها هم برگشت داده میشن که باید اینو اصلاح کنید

        پاسخ
      5. محمود رنجبر ۲۲ آذر ۱۳۹۹

        سلام دوباره حسن جان مشکلم حل شد تو صفحه source فقط باید کد php باشه مال من تگ body و غیره هم داشت حذف کردم درست شد ممنون از سایت خوبتون

        پاسخ
      6. حسن شفیعی ۲۲ آذر ۱۳۹۹

        سلام. خوشحالیم که حل شد.
        موفق باشید.

        پاسخ
  5. سید جعفر ۲۷ آبان ۱۳۹۸

    سلام علیکم
    خیلی ممنون تشکر
    استاد چرا توسط این میتود jquery ui نمیشه اطلاعات فارسی را دریافت کرد؟؟؟؟
    خیلی کوشش کردم اما فقط در کلمات انگلیسی جواب می دهد..

    پاسخ
    1. حسن شفیعی ۶ آذر ۱۳۹۸

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

      پاسخ
  6. میلاد ۳ بهمن ۱۳۹۷

    آیتم ها را به چه صورتی در جي کوئري به دست بیاورم لطفا کد آن را بفرماييد

    پاسخ
    1. حسن شفیعی ۴ بهمن ۱۳۹۷

      در اینصورت نیاز است که از گزینه ای به جز autocomplete که در jquery ui هست مثل AJAX استفاده کنید
      که آموزش کامل ایجکس هم در مقاله آموزش متد ajax در jquery وجود دارد و با مطالعه آن می بینید که اینکار بی نهایت ساده است.
      سعی ما این است کد کامل ارایه ندیم تا خودتان دنبال موضوع برید و نحوه پیاده سازی آن را یاد بگیرید.
      موفق باشید

      پاسخ
  7. میلاد ۳ بهمن ۱۳۹۷

    سلام وقتون بخیر اگر بخواهیم روی یکی از گزینه های کلیک کنیم و به صفحه مربوطه ان بریم به طور مثال ما وقتی کلمه گوشی را سرچ می کنیم به صورت خودکار برای ما گوشی سامسونگ و گوشی اپل و… می آید اگر روی یکی از این های کلیک کردیم برود به صفحه مربوطه خودش این قسمت را به چه صورتی پیاده سازی کنیم ؟

    پاسخ
    1. حسن شفیعی ۳ بهمن ۱۳۹۷

      سلام. ممنون. در اینصورت نیاز است که برای هر یک از آیتم ها تگ a با خاصیت href‌ رو در نظر بگیرید و آدرس url آنها را از دیتابیس فراخوانی کنید.
      موفق باشید.

      پاسخ
  8. میلاد ۲۹ دی ۱۳۹۷

    من با PHPMVC کار می کنم اگر بخوام به صورت PHPMVC این کد را نوشت به چه صورتی می شود

    پاسخ
    1. حسن شفیعی ۲۹ دی ۱۳۹۷

      سلام. نمیشه گفت باید به چه صورت در پروژه شما باید پیاده سازی بشه چون با ساختار برنامه شما اطلاعی نداریم.
      ابتدا باید بخش view رو ایجاد کند که شامل کد html,css برای نمایش ورودی و همچنین کد جی کویری و کد ajax.
      بعد کد های مربوطه php را به عنوان یک متد در یکی از کنترلر ها تعریف می کنید.
      سپس یک روتر رو برای ارسال این درخواست و قرار دادن آدرس آن در ajax دارید, ایجاد می کنید

      موفق باشید.

      پاسخ
  9. سروش ۲۶ تیر ۱۳۹۷

    سلام خسته نباشيد،اول از همه تشكر بابت سايت مفيد و عاليتون،ميخواستم بدونم اگه بخام از يك ليست باكس استفاده كنم كه فقط از ديتابيس mysqli يك ستون رو به كاربر نشون بده و كاربر بتونه اونو انتخاب كنه حتما بايد از jquery استفاده كنم؟و ميخواستم بدونم شما آموزشش رو دارين؟اگه ممكنه لينك آموزشو بهم بدين ممنون

    پاسخ
    1. حسن شفیعی ۲۶ تیر ۱۳۹۷

      سلام ممنون . خوشحالم که مفید واقع شده . بله میتونید از جی کویری استفاده کنید . این آموزش میتونه مفید باشه
      https://netparadis.com/jquery-custom-dropdown-with-checkbox

      https://netparadis.com/city-selection-list-ajax-php/

      موفق باشید.

      پاسخ
دوره های آموزشی