11.1 هزار

یکی از محبوب ترین و ضروری ترین توابع در هر سایت جستجو است که با استفاده از یک فرم خاص اجرا می شود. این قابلیت به بازدیدکنندگان اجازه می دهد تا به سرعت محتوای مورد نظر خود را در سایت پیدا کنند.

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

فرم های جستجو را با PHP توسعه دهید و با SQL آشنا شوید ( زبان پرس و جو ساختاریافته) یک زبان ویژه برای جمع آوری، ثبت و اصلاح اطلاعات موجود در پایگاه های داده است. قبل از شروع، ما به شما توصیه می کنیم دانلود فایل های پروژه.

چه چیزی نیاز خواهید داشت

• ابزار پایگاه داده MySQL.
• سرور محلی یا راه دور با پشتیبانی PHP.
• ویرایشگر متن

ایجاد پایگاه داده

اگر کاملاً مطمئن نیستید که می توانید با پایگاه داده موجود در هاست خود سروکار داشته باشید، برای راهنمایی یا کمک با میزبان تماس بگیرید. پس از ایجاد پایگاه داده، باید آن را متصل کنید، جدولی ایجاد کنید و داده های لازم را روی آن بنویسید.

محبوب ترین ابزار مدیریت MySQL PHP My Admin است.این ابزار برای راهنمای امروز ما کافی خواهد بود.

یک جدول ایجاد کنید

جدول ما باید در قالب زیر ایجاد شود:

نام ستون	نوع داده	طول	پوچ یا پوچ نیست	کلید اصلی؟	افزایش خودکار
شناسه	INT	1	تهی نیست	آره	آره
نام کوچک	وارچار	50	تهی نیست	نه	نه
نام خانوادگی	وارچار	50	تهی نیست	نه	نه
پست الکترونیک	وارچار	50	تهی نیست	نه	نه
شماره تلفن	وارچار	15	تهی نیست	نه	نه

یک جدول پایگاه داده مانند اکسل از ستون ها و ردیف ها تشکیل شده است. ستون اول به شما امکان می دهد داده ها را با نام شناسایی کنید. سپس ستون Data Types (نوع داده) می آید که نوع داده های موجود در ستون را به ما نشان می دهد. در قسمت Length (Length) حداکثر مقدار حافظه (ذخیره سازی) برای ستون جدول را نشان می دهد. ما از متغیرهایی استفاده می کنیم که انعطاف پذیری بیشتری می دهند. به عبارت دیگر، اگر طول نام کامل کمتر از 50 کاراکتر باشد، تنها بخشی از فضای اختصاص داده شده اشغال خواهد شد.

و در بین داده های پرسنل مقادیر خالی وجود ندارد ( پوچ، خالی). ردیف اول با رنگ زرد مشخص شده است زیرا ستون ID کلید اصلی ما است. کلید اصلی در پایگاه داده تضمین می کند که هر ورودی منحصر به فرد خواهد بود. این ستون همچنین به صورت خودکار افزایش می یابد، به این معنی که به هر رکورد در پایگاه داده ما یک شماره منحصر به فرد به طور خودکار اختصاص می یابد.

نمایندگان کارکنان را در جدول وارد می کنیم

هنگامی که جدول را درک کردید، آن را با داده ها پر کنید. 6 مدخل برای تثبیت رویه در ذهن کافی است. در اینجا مثال خود من است:

شناسه ستون	نام کوچک	نام خانوادگی	پست الکترونیک	شماره تلفن
2	رایان	خدمتکار	[ایمیل محافظت شده]	417-854-8547
3	برنت	کالاهان	[ایمیل محافظت شده]	417-854-6587

توسعه فرم

برای ایجاد فرم جستجوی سایت از طریق گوگل، هر ویرایشگر متن مناسب را باز کنید. توصیه می کنم از PSPad رایگان استفاده کنید. می توانید از هر ویرایشگر متنی که دارای برجسته سازی نحو است استفاده کنید. این فرآیند نوشتن و اشکال زدایی کدهای PHP را تا حد زیادی تسهیل می کند. هنگام ایجاد صفحه برای فرم جستجو، مطمئن شوید که آن را با فرمت php. ذخیره کنید، در غیر این صورت کد PHP به درستی تجزیه نمی شود. پس از ذخیره سند، نشانه گذاری زیر را در آن کپی کنید:

جستجوی دقیق تماس

می توانید با نام یا نام خانوادگی جستجو کنید

اگر با زبان HTML آشنا هستید، پس حداقل تا تگ فرم افتتاحیه باید همه چیز برای شما روشن باشد. در داخل این تگ مهمترین عنصر کل کد است - ویژگی action. به عنوان عمل فرم خود، نام فایل خود را مشخص کردیم و سپس رشته query را اعمال کردیم. برو”.

بررسی معیارها

هنگامی که کاربر یک نام یا نام خانوادگی را وارد می کند و سپس روی دکمه ارسال کلیک می کند، فرم داده ها را برای خود ارسال می کند و رشته پرس و جو را اضافه می کند. برو". در این مرحله، ما در حال بررسی وجود رشته go query هستیم. اگر نتیجه مثبت باشد، نتایج جستجو را نمایش می دهیم.

قبل از نمایش نتایج درخواستی، باید دوباره بررسی کنیم: (1) آیا فرم ارسال شده است، (2) آیا رشته پرس و جو حاوی مقدار go است، (3) آیا عبارت جستجو با حروف کوچک یا بزرگ وارد شده است؟ اگر هیچ یک از بررسی ها نتیجه مثبت ندهد ( درست است، واقعی) ما ملزم به انجام هیچ اقدامی نیستیم.

ابتدا، اجازه دهید یک بلوک کوچک از کد PHP را برای جستجوی سایت پس از تگ بسته شدن اضافه کنیم.:

ابتدا بلوکی از کدهای PHP را با تگ ”” باز می کنیم.

هر کد PHP در این جفت تگ توسط سرور اجرا می شود. سپس بررسی می کنیم که آیا فرم ارسال شده است یا خیر:

یک عبارت جستجو را وارد کنید

"; } ?>

ما از تابع isset داخلی استفاده می کنیم که یک مقدار bool را برمی گرداند و آرایه $_POST را در آن قرار می دهیم. یک عبارت منطقی در برنامه نویسی به ما امکان می دهد که درست یا نادرست را دریافت کنیم.

بنابراین، اگر تابع true را برگرداند، فرم ارسال شده است و باید به اجرای کد ادامه دهیم. اگر تابع false را برگرداند، یک پیغام خطا نشان خواهیم داد. تمام کدهای تایپ شده را در فایل search_submit.php ذخیره کنید.

یک عبارت جستجو را وارد کنید

"; } } } ?>

ما یک عبارت بولی شرطی دیگر را در داخل عبارت اصلی قرار می دهیم، اما این بار از آرایه $_GET همراه با مقدار " استفاده می کنیم. برو". تغییرات خود را در فایل search_go.php ذخیره کنید.

اکنون باید مطمئن شویم که بازدیدکنندگان می توانند حرف اول را در رشته پرس و جو فقط با حروف بزرگ یا فقط با حروف کوچک وارد کنند. همچنین باید راهی برای در نظر گرفتن معیارهای جستجوی وارد شده توسط بازدیدکننده ارائه کنیم. بهترین راه برای اعتبار سنجی ورودی بازدیدکننده با یک عبارت منظم است:

ما یک عبارت بولی شرطی دیگر را در داخل دو خود لانه می کنیم. این بار از یک عبارت منظم برای تایید ورودی استفاده می کنیم. ما از تابع داخلی preg_match با دو پارامتر استفاده می‌کنیم: یک عبارت منظم و یک فیلد فرم که اعتبارسنجی باید روی آن اعمال شود.

در مورد ما، این فیلد "نام" خواهد بود( نام). برای بازیابی پارامترهای جستجوی مشخص شده توسط بازدیدکننده، یک متغیر $name ایجاد می کنیم و یک مقدار POST را با نام فیلد از فرمی که در پرس و جوی SQL استفاده می شود، به آن متصل می کنیم. ما اکنون پیاده سازی کرده ایم: (1) ارسال داده های فرم، (2) رشته پرس و جو شامل یک مقدار go است، و (3) بازدید کننده یک حرف اول بزرگ یا کوچک را وارد کرده است. و همه این بررسی ها حتی قبل از ایجاد تغییرات در پایگاه داده انجام می شود. همه تغییرات را ذخیره کنید

اتصال، انتخاب، پرس و جو و برگرداندن نتایج از جدول پایگاه داده

برای دریافت داده ها از یک جدول، ابتدا باید در اسکریپت جستجوی سایت به سرور متصل شوید. برای این کار از کد زیر استفاده می کنیم:

", "") یا مرگ ("من نمی توانم به پایگاه داده متصل شوم زیرا: ". mysql_error()); else(echo "

لطفا یک عبارت برای جستجوی وارد کنید

"; } } }?>

ما یک متغیر $db ایجاد می کنیم و آن را به تابع داخلی MySQL mysql_connect متصل می کنیم که سه پارامتر را می گیرد: سرور با پایگاه داده ( میزبان محلی, اگر به صورت محلی کار می کنید)، لاگین و رمز عبور.

پس از آن، تابع داخلی PHP die را اجرا می کنیم، که در صورت عدم اتصال به پایگاه داده، اجرای کد بیشتر را متوقف می کند. و با اجرای تابع داخلی MySQL mysql_error اطلاعات خطا را چاپ کنید که دلیل خطا را برمی‌گرداند. فایل search_connectdb.php را ذخیره کنید.

لطفا یک عبارت برای جستجوی وارد کنید

"; } } } ?>

یک متغیر به نام mydb ایجاد کنید و آن را به داخلی متصل کنید توابع MySQL mysql_select_db، و سپس نام پایگاه داده ای را که قبلا ایجاد کردیم را مشخص کنید. در مرحله بعد، جدول پایگاه داده را با استفاده از یک پرس و جوی SQL با متغیر نام حاوی پارامترهای جستجوی وارد شده توسط بازدیدکننده پرس و جو می کنیم:

لطفا یک عبارت برای جستجوی وارد کنید

"; } } } ?>

هنگامی که یک جدول پایگاه داده را پرس و جو می کنیم، یک متغیر $sql ایجاد می کنیم و آن را به رشته ای که حاوی یک کوئری SQL است متصل می کنیم. ما از دستور SELECT برای بازیابی مقادیر از ستون های id و نام و نام خانوادگی از جدول مخاطبین استفاده می کنیم. سپس از عبارت WHERE به همراه مقادیر نام و نام خانوادگی برای محدود کردن جستجو استفاده می کنیم.

همراه با عملگر LIKE، ما از علامت درصد (%) استفاده می کنیم - یک کاراکتر خاص که 0 یا بیشتر کاراکتر را برمی گرداند و همچنین متغیر نام را از رشته جستجو برمی گرداند. در نتیجه، LIKE ( با یک شخصیت خاص ترکیب شده است) هر نام تطبیقی ​​را در جدول پایگاه داده پیدا می کند. کل فرآیند را می توان به شرح زیر توصیف کرد: نام و نام خانوادگی را از جدول مخاطبین انتخاب می کنیم که با نام های وارد شده توسط بازدید کننده مطابقت دارد". فایل search_query.php را ذخیره کنید.

لطفا یک عبارت برای جستجوی وارد کنید

"; } } } ?>

ما یک متغیر $result ایجاد می کنیم و مقدار تابع mysql_query() را به آن اختصاص می دهیم و آن را در $query قرار می دهیم. اکنون کوئری ما در متغیر نتیجه ذخیره می شود. برای خروجی گرفتن نتیجه در PHP، یک حلقه ایجاد می کنیم و سپس داده ها را در یک لیست نامرتب خروجی می دهیم:

n"؛ پژواک "

" . "

n"؛ پژواک ""; ) ) else(echo"

لطفا یک عبارت برای جستجوی وارد کنید

"; } } } ?>

ابتدا یک حلقه while ایجاد می کنیم، در داخل آن متغیری به نام row ایجاد می کنیم و آن را با مقدار بازگشتی تابع mysql_fetch_array مقداردهی اولیه می کنیم، که یک متغیر نتیجه را می گیرد که شامل پرس و جوی SQL ما است. در داخل حلقه while، به هر ستون مقدار متغیری با همان نام اختصاص می دهیم. سپس مقادیر را در یک لیست نامرتب خروجی می دهیم.

توجه به دو نکته در اینجا مهم است: (1) در داخل حلقه while، نیازی به اختصاص مقادیر به متغیرهای آرایه ردیفی ندارید، زیرا مقادیر را می توان مستقیماً از آرایه ردیف گرفت. (2) تگ anchor که در نام فایل خود به همراه شناسه و کلید اصلی استفاده می کنیم. دلیل این امر این است که بسیاری از موارد جستجو در ابتدا چیزی را نشان نمی دهند.

از آنجایی که ما فقط نام و نام خانوادگی را با افزودن یک شناسه در انتهای تگ لنگر خود نمایش می دهیم، می توانیم از شناسه برای یک درخواست اضافی استفاده کنیم که اطلاعات اضافی درباره کارکنان را نمایش می دهد. فایل را ذخیره کنید و فرم PHP جستجوی سایت را تست کنید ( search_display.php).

برگه ها را حذف کنید

نتایج به صورت یک لیست نامرتب نمایش داده می شوند، اما نکته اصلی این است که ما به برگه ها نیاز نداریم. برای خلاص شدن از شر آن، قانون CSS زیر را به بالای فایل خود در قسمت سر اضافه کنید:

جستجو بر اساس حروف

برای پیاده سازی جستجوی املایی فقط چند خط کد اضافی لازم است. بیایید این قابلیت راحت را برای بازدیدکنندگان اضافه کنیم. به این ترتیب آنها می توانند نمایندگان کارکنان را با حروف مندرج در نام یا نام خانوادگی پیدا کنند.

پس از بستن تگ فرم، خط کد زیر را اضافه کنید:

A | b | ک

برچسب را می بندیم به یک رشته کوئری با استفاده از لنگر، و آن را روی یک حرف خاص تنظیم کنید. برای پیاده سازی عملکرد جستجوی املا، باید کد زیر را درست بعد از بسته شدن پرانتز در اسکریپت اصلی اضافه کنیم، همانطور که در زیر نشان داده شده است:

)//پایان اسکریپت فرم جستجو if(isset($_GET["by"]))($letter=$_GET["by"]; //اتصال به پایگاه داده $db=mysql_connect ("نام سرور"، " نام کاربری" ، "گذرواژه") یا مرگ ("من نمی توانم به پایگاه داده متصل شوم زیرا: " . mysql_error())؛ //-پایگاه داده را انتخاب کنید $mydb=mysql_select_db("پایگاه داده شما")؛ //-پرس و جو در پایگاه داده table $sql="SELECT ID, FirstName, LastName FROM Contacts WHERE FirstName LIKE "%" . $letter . "%" OR LastName LIKE "%" . $letter ."%""؛ //-عملکرد Query MySQL را اجرا کنید $ result=mysql_query($sql)؛ //-شمارش نتایج $numrows=mysql_num_rows($result); echo "

" .$numrows . " نتایج برای " . $letter ."

"; //-حلقه را شروع کنید و نتایج را مرتب کنید while($row=mysql_fetch_array($result))($FirstName =$row["FirstName"]; $LastName=$row["LastName"]; $ID=$ row[ "ID"]؛ //-نتیجه را در echo آرایه نمایش دهید "

n"؛ پژواک "
• " . "" .$FirstName . " " . $LastName . "
n"؛ پژواک "

"; } }

در اینجا ما چهار قطعه کد از اسکریپت جستجوی سایت را تغییر داده ایم:

• ما از تابع isset() استفاده می کنیم و آرایه $_GET را در آن قرار می دهیم و سپس مقدار by را بررسی می کنیم.
• یک متغیر $letter ایجاد کنید و مقدار آن را با آرایه $_GET مقداردهی کنید.
• افزودن حرف متغیر به پرس و جوی SQL.
• ما حروف متغیر را در داخل عبارت مشخص می کنیم که در آن تعداد خطوط شمارش شده را بدست می آوریم.

فایل search_byletter.php را ذخیره کرده و نتیجه را بررسی کنید.

جستجوی یک کارمند خاص

برای نمایش اطلاعات بقیه کارکنان که از طریق یک شناسه منحصر به فرد در داخل لینک ما ارسال می شود، باید کد زیر را درست بعد از بسته شدن پرانتز در اسکریپت حرف اضافه کنیم، همانطور که در زیر نشان داده شده است:

)//پایان اسکریپت if(isset($_GET["id"]))($contactid=$_GET["id"]; //اتصال به پایگاه داده $db=mysql_connect ("نام سرور"، "نام کاربری" , "password") یا die ("من نمی توانم به پایگاه داده متصل شوم زیرا: ". mysql_error()); //- پایگاه داده را برای استفاده از $mydb=mysql_select_db ("پایگاه داده شما") انتخاب کنید؛ //- پایگاه داده را جستجو کنید table $sql="SELECT * FROM Contacts WHERE ID=" .$contactid; //- اجرای پرس و جو به mysql_query() function $result=mysql_query($sql); //- حلقه را اجرا کنید و نتایج را مرتب کنید while($row=mysql_fetch_array ($result))( $FirstName =$row["FirstName"]؛ $LastName=$row["LastName"]؛ $PhoneNumber=$row["PhoneNumber"]؛ $Email=$row["Email"]; //- نمایش نتیجه در آرایه echo "

n"؛ پژواک "
• " . $FirstName . " " . $LastName . "
n"؛ پژواک "
• " . $PhoneNumber ."
n"؛ پژواک "
• " . "" . $Email ."
n"؛ پژواک "

"; } }

در اینجا ما چهار قطعه کد را تغییر داده ایم:

• ما از تابع isset() برای بررسی مقدار ID در آرایه $_GET استفاده می کنیم.
• یک متغیر $contactid ایجاد کنید و آن را با آرایه $_GET مقداردهی اولیه کنید.
• در جدول، هر چیزی که با ستاره * مشخص شده است را انتخاب کنید. ستاره یک علامت کوتاه در SQL است که به معنای " تمام ستون ها و سطرهای جدول را به من بدهید". برای تعیین اینکه چه اطلاعاتی باید نمایش داده شود، متغیر contactid را در انتهای عبارت SQL ذکر می کنیم.
• ما اطلاعات اضافی در مورد هر یک از نمایندگان کارکنان نمایش می دهیم.

فایل search_byid.php را ذخیره کرده و نتیجه را بررسی کنید.

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

تزریق SQL

دلیل اینکه ما یک عبارت منظم را به فیلد جستجوی خود اضافه کردیم این است که هیچ کس نمی تواند پرس و جوی SQL ما را دستکاری کند. در گذشته، این مشکل رایج بود و هکرها در حین دستکاری برنامه شما، کوئری های SQL خود را اجرا می کردند. به عنوان مثال، اگر امکان استفاده از آپوستروف را در فیلد خود مجاز بدانیم، یک هکر به سادگی می تواند پایگاه داده را با استفاده از پرس و جو حذف کند:

" میز رها کنید

همانطور که قبلاً ذکر شد، عبارت منظم تضمین می کند که بازدید کننده فقط می تواند حروف کوچک یا بزرگ را به عنوان کاراکتر اول وارد کند.

در نتیجه

در مقاله امروز نحوه جستجوی سایت و همچنین موارد زیر را بررسی کردیم:

• ایجاد پایگاه داده و جداول مرتبط
• از ابزارهای مدیریت پایگاه داده استفاده کنید، ستون ایجاد کنید و داده ها را وارد کنید.
• ایجاد فرم های جستجو بر اساس PHP، که می تواند داده های ورودی، وجود متغیرها را در درخواست بررسی کند، و همچنین به پایگاه داده متصل شود و نتایج را از جدول نمایش دهد.
• چگونه از برنامه و پایگاه داده خود در برابر تزریق SQL محافظت کنیم.

با استفاده از دانش به دست آمده از این مقاله، می توانید به راحتی کد شخص دیگری را تغییر دهید و همچنین در صورت لزوم، عملکرد فرم جستجو را گسترش دهید.

این نشریه ترجمه ای است از مقاله " نحوه ایجاد ویژگی جستجو با PHP و MySQL» تهیه شده توسط یک تیم پروژه دوستانه

از نویسنده:سلام دوستان. در این مقاله به پیاده سازی جستجوی زنده برای سایت ادامه می دهیم. جستجوی زنده چیست؟ زمانی که به دنبال چیزی در گوگل یا یاندکس هستید، همیشه با آن روبرو می شوید. به محض اینکه شروع به تایپ یک عبارت جستجو می کنید، موتور جستجو بلافاصله شروع به ارائه گزینه هایی به شما می کند که فقط باید از بین آنها مناسب ترین را انتخاب کنید. چیزهای مفید، درست است؟ بیایید سعی کنیم چیزی مشابه را پیاده سازی کنیم.

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

بنابراین، در قسمت اول، پایگاه داده ای را که برای جستجوی زنده استفاده می شود آماده کردیم و همچنین ویجت تکمیل خودکار کتابخانه jQuery UI را به قسمت جستجوی صفحه خود پیچ ​​کردیم. تا کنون، ویجت با داده های آزمایشی کار می کند، اما اکنون آن را برطرف خواهیم کرد.

اول از همه، اجازه دهید منبع داده دیگری را برای ویجت مشخص کنیم، مثلاً فایل search.php خواهد بود که ما نیز باید آن را ایجاد کنیم.

$(function()( $("#search").autocomplete(( منبع: "search.php", )); ));

حالا هر کاراکتری را در قسمت جستجو تایپ می کنم و ببینم در کنسول مرورگر چه اتفاقی می افتد.

همانطور که می بینید یک درخواست GET با پارامتر عبارت ارسال می شود که مقدار آن رشته ای است که در قسمت جستجو تایپ شده است. در این حالت، همه چیز به صورت ناهمزمان اتفاق می افتد، بدون بارگیری مجدد صفحه، یعنی. با استفاده از AJAX

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

$db = mysqli_connect("localhost"، "root"، """، "world") یا die("بدون اتصال DB"); mysqli_set_charset($db، "utf8") یا die("کدگذاری اتصال تنظیم نشده است"); /** * جستجوی تکمیل خودکار **/ تابع search_autocomplete()( جهانی $db; $search = trim(mysqli_real_escape_string($db, $_GET["term"]))؛ $query = "انتخاب نام از شهر جایی که نام مانند " %($search)%" LIMIT 10"؛ $res = mysqli_query($db, $query); $result_search = array(); while($row = mysqli_fetch_assoc($res))($result_search = آرایه("label" => $row["Name"]؛ ) $result_search را برگردانید؛ ) if(!empty($_GET["term"]))($search = search_autocomplete(); exit(json_encode($search))؛ )

$ db = mysqli_connect ("localhost" , "root" , "" , "world") یا die ( "بدون اتصال به پایگاه داده") ; mysqli_set_charset ($db، "utf8") یا die( "کدگذاری اتصال تنظیم نشده است") ; * جستجوی تکمیل خودکار تابع search_autocomplete()( جهانی $db; $ search = trim (mysqli_real_escape_string ( $ db , $ _GET [ "term" ] ) ; $res = mysqli_query($db، $query) ; $result_search = array(); در حالی که ($row = mysqli_fetch_assoc($res)) ( $result_search = array("label" => $row["Name"] ); بازگشت $result_search; if (! خالی ($_GET [ "term" ] ) ) ( $search = search_autocomplete(); exit(json_encode($search) );

لطفا توجه داشته باشید که تابع search_autocomplete که در صورت درخواست داده ها را دریافت می کند، باید این داده ها را در قالب خاصی برگرداند، باید آرایه ای با کلیدهای برچسب و مقادیر شهرهای یافت شده باشد. پس از فراخوانی تابع، داده ها باید به فرمت JSON تبدیل شوند.

باقی مانده است که کار جستجوی زنده ما را بررسی کنیم. برای انجام این کار، مانند دفعه قبل، فقط یک حرف را تایپ می کنیم - a:

عالی! در پاسخ ده ها شهر دریافت کردیم که حرف وارد شده به نام آنها آمده است. اگر به تایپ نام ادامه دهیم، لیست گزینه ها تغییر می کند، i.e. با هر نامه یک درخواست جدید AJAX ارسال خواهد شد.

بهترین راه برای نگه داشتن کاربر در سایت این است که به او اجازه دهید آنچه را که به دنبالش است پیدا کند. اگر یک سیستم مناسب برای این کار بسازید، سطح اولویت سایت شما افزایش می یابد و کاربر قطعاً برای یافتن آنچه مورد علاقه خود است باز خواهد گشت.

من به شما نشان خواهم داد که چگونه یک فرم جستجوی ساده، اما از نظر کاربردی موثر ایجاد کنید که برای جستجوی مقالات در سایت استفاده می شود. نتایج بدون بارگذاری مجدد در صفحه ظاهر می شوند که بدون شک بهترین راه برای ارائه اطلاعات است.

من 2 فایل ایجاد خواهم کرد: search.php که حاوی HTML و جاوا اسکریپت است. فایل دوم، do_search.php حاوی کد PHP خواهد بود. بیایید شروع به ایجاد اولین فایل کنیم:

سعی کنید کلمه ajax را وارد کنید

در این فایل، ما یک فرم معمولی HTML ایجاد کرده ایم که یک درخواست POST را به انتهای پشتی، فایل do_search.php ارسال می کند.

select_list ($sql)؛ if(count($row)) ($end_result = ""; foreach($row as $r) ($result = $r["title"]; $bold = " " . $word .""; $end_result .= "

".str_ireplace($word، $bold، $result)."

"; ) echo $end_result; ) else (echo"

چیزی برای درخواست شما پیدا نشد

"; } } ?>

کد PHP حاوی نظراتی است که درک نحوه کار اسکریپت را برای شما آسان می کند. اگر موارد منطبق در پایگاه داده وجود داشته باشد، آنها را با بولد کردن کلمات مورد نظر کاربر به کاربر خود نشان می دهید.

بیایید به همه آن مقداری CSS بدهیم:

Body( فونت-family:Arial، Helvetica، sans-serif; ) *( margin:0;padding:0; ) #container ( margin: 0 auto; عرض: 600px; ) a ( color:#DF3D82; text-decoration: هیچ ) a:hover (رنگ:#DF3D82؛ متن-تزیین:زیرخط؛ ) ul.update (list-style:none;اندازه قلم:1.1em; margin-top:10px) ul.update li(ارتفاع:30px; border-bottom:#dedede solid 1px; text-align:left;) ul.update li:first-child( border-top:#dedede solid 1px; height:30px; text-align:left; ) #flash ( margin- top:20px؛ text-align:left; ) #searchresults ( text-align:left; margin-top:20px; display:none; font-family:Arial، Helvetica، sans-serif؛ اندازه قلم: 16px؛ رنگ: #000; ) .word ( فونت-وزن:پررنگ؛ رنگ:#000000; ) #جعبه_جستجو ( padding:4px; حاشیه:solid 1px #666666; عرض:300px; ارتفاع:30px;اندازه قلم:18px;-moz- border-radius: 6px;-webkit-border-radius: 6px; ) .search_button (حاشیه:#000000 جامد 1px؛ padding: 6px; color:#000; font-weight:bold; font-size:16px;-moz- border-radius: 6px;-webkit-border-radius: 6px; ) .found ( فونت-وزن: پررنگ ; سبک فونت: مورب; رنگ: #ff0000; ) h2 ( حاشیه سمت راست: 70 پیکسل؛ )

بنابراین شما یاد گرفته اید که چگونه یک فرم جستجوی ساده ایجاد کنید که بدون بارگیری مجدد صفحه کار کند. امیدوارم از درس لذت برده باشید.

اهداف اصلی:

• جستجو را به گونه ای اجرا کنید که پس از وارد کردن یک عبارت جستجو در یک خط، نتایج جستجو در زیر این خط ظاهر شود
• درخواست برای دریافت نتیجه باید فقط پس از پایان ورودی پرس و جو انجام شود

باشه، بزن بریم!

یک طرح تقریبی از خود بلوک با یک رشته جستجو و یک نام مستعار div که در آن نتایج جستجو را اضافه خواهیم کرد:

زیرا جستجو در هدر سایت موجود است، بیایید اسکریپت های جستجو و استایل مناسب را برای نتایج اضافه کنیم:

//جستجو را تمام کنید: $APPLICATION->AddHeadScript("/search/ajax_search.js"); $APPLICATION->AddHeadScript("/search/jquery.mCustomScrollbar.js"); $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/ajax_search.css"); $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/css/jquery.mCustomScrollbar.min.css");

حالا بیایید ببینیم در ajax_search.js ما چیست:

تابع get_result ()( //پاک کردن نتایج جستجو $("#search_result").html("")؛ //ما هنوز نتایج جستجو را دریافت نکرده ایم - نمایش پیش بارگذاری $("#search_result").append( "

")؛ $.ajax((نوع: "POST"، url: "/search/ajax_search.php"، داده: "q="+q، dataType: "json"، موفقیت: function(json)( //clear پیش بارگذاری $("#search_result").html(""); $("#search_result").append(" "); // هر عنصر از آرایه json را با class="live-search" در یک div اضافه کنید (شما می توانید از طرح بندی خود استفاده کنید) $.each(json, function(index, element) ($("#search_result" .find ("".live-search").append(" "+element.TITLE+""+element.BODY_FORMATED+"")؛ //console.log (element.BODY_FORMATED); ))؛ //پیمایش را به سبک $(".live-search").mCustomScrollbar(( scrollInertia: 500 )); ) ))؛ ) var timer = 0 ; var q = ""; $(document).ready(function() ($("#q").keyup(function() ( q = this.value; clearTimeout(timer); timer = setTimeout(get_result, 1000 ) ; ))؛ $("#reset_live_search"). کلیک کنید(function() ($("#search_result").html(""); )); ));

تابع keyup، تابع get_result () را می نامیم، که در واقع div-nick را با id = "search_result" در ajax پر می کند.

mCustomScrollbar فقط یک تماس استایل است (می توانید آن را خاموش کنید).

ما داده ها را از /search/ajax_search.php در قالب JSON دریافت می کنیم.

همه چیز با کامپوننت JS مشخص است، حالا بیایید ببینیم در ajax_search.php چه اتفاقی می افتد:

جستجو(آرایه("QUERY" => $q، "SITE_ID" => LANG، "MODULE_ID" => "iblock"، "CHECK_DATES" => "Y"، "PARAM2" => "8")); $result = array(); while ($res = $obSearch->GetNext())( $id = $res["ITEM_ID"]؛ //اگر بخش یافت شد: if (strripos($id, "S")!==false)( $result_item ["TITLE"] = $res["TITLE"]؛ $result_item["URL"] = $res["URL"]؛ $result_item["BODY_FORMATED"] = $res["TITLE_FORMATED"]؛ $result = $ result_item; ) //اگر S وجود ندارد، else($result_item["TITLE"] = $res["TITLE"]; $result_item["URL"] = $res["URL"]؛ $result_item[" BODY_FORMATED"] = $res["BODY_FORMATED"]؛ $result = $result_item; ) ) echo json_encode($result); )؟>

در این حالت جستجو با متد Search کلاس Bitrix CSearch انجام می شود. در PARAM2 می نویسیم که در کدام infoblock به دنبال آن هستیم. نتایج جستجو را به آرایه $result فشار می دهیم. توجه داشته باشید که $res['ITEM_ID'] می‌تواند یک مورد یا یک بخش باشد. بسته به آنچه پیدا کردیم، در $result_item['BODY_FORMATED'] یا نام بخش، یا یک قطعه از متن را از عنصر یافت شده از بلوک اطلاعاتی به نمایش می‌گذاریم.

مطالب موضوعی:

کیهان نورد ماکسیم سورایف: بیوگرافی (عکس)

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

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

پیمانکار عمومی و پیمانکار

کارت با نمونه امضا و مهر

نحوه ایجاد فاکتور برای پیش پرداخت در بخش حسابداری یک شرکت

چه خدماتی در خارج از کشور توسعه می یابد

سرمایه گذاری واقعی چیست

به روز رسانی: 01/10/2022

103583

اگر متوجه خطایی شدید، یک متن را انتخاب کنید و Ctrl + Enter را فشار دهید