طراحی و بهینه سازیمشاهده

آخرین ارسال های تالار مشاهده انجمن

عنوانپاسخبازدیدتوسط
iconforumاسکریپت و افزونه بانک پاسارگاد04H A S A N
iconforumلایک وردپرس08AHF-victory
iconforumافزونه کوتاه کننده346AHF-victory
iconforumاسکریپت ptciran790mostafaHD
iconforumلوگو سایت تفریحی448xara_2009
iconforumهنگام نصب اسکریپت تراوین با دیتا بیس مشکل دارم444xara_2009
iconforumرگولاتوري كجاي ماجراست؟ ( ديدگاه حاكميت ICT )07AynaZ
iconforumمجوز فعالیت برای کانال‌های تلگرامی06AynaZ
iconforumبا سایت اموزش گرافیک ، کدنویسی ، سئو و ...118AynaZ
iconforumعوارض ورزش های سنگین113AynaZ
iconforumفروش اسکریپت آپلودبوی فارسی377admin2000
درگاه پرداخت
درگاه پرداخت

آموزش ساخت autocomplete با کمک php و JQuery

آموزش ها , مقالات,آموزش,ترفند
آموزش ساخت autocomplete با کمک php و JQueryReviewed by Admin on Jul 16Rating:

خود تکمیلی (Auto-completion) یعنی برنامه یا محیط، بتونه کلمه‌ای رو که کاربر قصد تایپ اون رو داره، حدس بزنه و در صورت تایید کاربر، تکمیل کنه. به عنوان مثال: یک محل استفاده از خود تکمیلی، در فرم جستجو سایت هست که کاربر با تایپ چند کلمه، میتونه اطلاعات مطالب شما رو در یک لیست مشاهده کنه. حالا این چه مزیتی داره؟!؟ اولا سهولت در جستجو برای کاربر و ثانیا جلوگیری از خطاهای بی مورد 404.

و اما نمونه ای که ما امروز آماده کردیم، قراره که یک فیلد ورودی داشته باشه و کاربر نام کشورش رو در این فیلد وارد کنه و سپس ما با استفاده از تابع autocomplete (از کتابخانه Jquery UI) لیستی از نتایج پایگاه دادمون رو به کاربر نشون میدیم. تصویر فرآیند نهایی، به صورت زیر خواهد بود:

مراحل ساخت و پیاده سازی عبارتند از:


مرحله اول: کتابخانه

برای استفاده از این قابلیت، اول از همه می بایست 2 کتابخانه JQuery و JQuery Ui رو به همراه شیوه نامه ی jquery-ui.min.css (که ظاهر لیست dropdown رو استایل دهی میکنه) در صفحه قالبمون فراخوانی کنیم.

HTML

 

مرحله دوم: تعریف فیلد ورودی

تعریف یک فیلد ورودی که بایستی حتما یک مشخصه class یا id رو داشته باشه. این فیلد رو ما به صورت زیر تعریف کردیم که البته شما میتونید از اون در یک form هم استفاده کنید.

HTML

 

مرحله سوم: فراخوانی تابع autocomplete و تعیین یک محل خوراک

حتما بخوانید  اسکریپت آپلود سنتر فایل HIPLOAD

در این بخش، ابتدا باید مشخه class یا id رو – که در فیلد ورودی تعیین کرده بودیم – در پیشوند فراخوانی تابع قرار بدیم. پس از انجام این کار و نوشتن تابع، نیاز به چند تنظیم ساده داریم که مربوط به تابع autocomplete میشه و مهمترینش تعیین یک محل خوراک در مشخصه source. این منبع، حتما باید از فرمت استاندارد JSON پیروی کنه و اطلاعات رو در اختیار تابع، قرار بده (برای ایجاد این منبع، محل سورس رو به فایلی با نام Search.php آدرس دهی میکنیم).

Jquery UI

 

تا اینجای کار، کدنویسی سمت کاربر تموم شده. حالا اگه ما بیایم و مراحل بالا رو در قالب یک صفحه html جمع بندی کنیم. نتیجه اش اسکریپتی میشه که با تایپ هر رشته کلمه جدید توسط کاربر، همواره یک لینک درخواست خوارک، به محل source ارسال میکنه. این لینک حاوی نام term  و مقدار تایپ شده توسط کاربر. به عنوان مثال، اگه کاربر در فیلد ورودی رشته ی ir رو تایپ کنه، لینک درخواست فرضی ما به صورت زیر خواهد بود:

http://localhost/autocomplete/search.php?term=ir

مرحله چهارم: چاپ نتایج پایگاه داده در فرمت JSON

چهارمین مرحله که آخرین مرحله کار هم محسوب میشه، اتصال به پایگاه داده و دریافت نتایج از یک جدول نمونه است. این کار رو ما در فایل search.php – که در بالا آدرس دهی کردیم – به صورت زیر انجام میدیم:

PHP

تمامی توضیحات در کنار کدها کامنت گذاری شدند و فک نکنم نیاز به توضیحات بیشتری داشته باشند! با اینحال تنها نکته ای که باقی مونده، دریافت اطلاعات از پایگاه داده است که ما به صورت فرضی، جدولی رو با نام countries ایجاد کردیم که دارای ستونی با نام country هست و تمامی اطلاعات از این ستون گرفته خواهد شد. شما میتونید نام این ستون و جدول فرضی رو مطابق با طراحی پایگاه دادتون تغییر بدید.

حتما بخوانید  انتخاب کلمات کلیدی حرفه ای تر برای سئو بهتر

 

برای راحتی بیشتر، تمامی کدهای داده شده + (یک فایل SQL از اطلاعات جدول countries) در یک بسته اسکریپتی جمع آوری شدند و شما میتونید به سادگی، این اسکریپت رو در یک محیط لوکال تست کنید.

به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود

خرید هاست حرفه ای سازگار با انواع اسکریپت همراه با نصب رایگان

مطلب مفیدی بود ؟
نویسنده : admin تاریخ : 1393/04/25 3 آموزش ها , مقالات,آموزش,ترفند

لینک کوتاه مطلب : http://www.20script.ir/?p=7475

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
1,712کد نمایش مطلب یک دسته خاص در وردپرس تاریخ : 1393/01/12
1,551رابط کاربری iMessage در 9 IOS با جی کوئری تاریخ : 1395/02/2
2,498اسلایدر Moving Boxes به صورت جی کوئری تاریخ : 1392/11/22
2,242اسکریپت تقویم و رویدادها Promoter تاریخ : 1394/11/23
2,872دانلود نسخه نهایی قالب فارسی صحیفه Sahifa نسخه 5.5.3 تاریخ : 1395/01/12
1,967اسکریپت فرم تماس با ما Vanilla Form تاریخ : 1394/04/13
2,563افزونه لایت باکس ilightbox برای وردپرس تاریخ : 1395/02/6
1,049نشانه گذاری خودکار دیدگاه های حاوی لینک های طولانی به عنوان جفنگ تاریخ : 1395/01/25
2,141ویرایش صفحه ی ورود و خروج در وردپرس تاریخ : 1393/05/9
1,841نوار رویداد های اخیر پیشرفته جی کوئری تاریخ : 1392/11/23
2,489اسکریپت آپلود فایل قدرتمند و واکنش گرا Arfaly.js تاریخ : 1393/12/25
1,159افزونه مترجم وب سایت به صورت آژاکس برای وردپرس تاریخ : 1395/08/13
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب