آموزش ساخت فرم جستجوی رشته و برجسته کردن کلمه با جی کوئری
Your browser doesn't support video.
Please download the file: video/mp4
مقدمه:
با سلام خدمت شما کاربر محترم وبسایت آموزش برنامه نویسی ilikephp. من علیرضا حاتمی نیا در این آموزش قصد دارم تا نحوه ساخت یک فرم جستجو در صفحه html توسط jquery را به شما آموزش دهم.
قبل از شروع می بیست با مباحث زیر آشنا باشید:
جستجوی کلمه یا عبارتی خاص در محتوای سایت و متمایز کردن آن از دیگر کلمات و عبارات جهت سهولت کار کاربران یکی از پرکاربردترین موارد در برنامه نویسی وب به شمار میرود. در این آموزش شما یاد خواهید گرفت که چه طور توسط جیکوئری یک فرم جستجو و برجسته کردن رشته برای محتوای صفحه خود بسازید.
تاکید می کنم این جستجو برای اطلاعاتی از صفحه مورد استفاده می شود که قبلا توسط سرور از دیتابیس بازیابی شده اند و درحال نمایش در صفحه به کاربر می باشند.
نحوه کار این فرم:
کاربر کلمه مورد نظر را در کادر متنی وارد می کند. سپس با کلیک بر روی دکمه جستجو کلیه کلمات یا عباراتی که با این کلمه یکسان هستند به صورت mark یا highlight از دیگر کلمات متمایز می شوند.
ساخت فرم جستجو :
<form>
<label>Search:</label>
<input type="text" id="myText">
<button id="search" type="button">Search</button>
</form>
در این فرم یک فیلد متنی با آیدی id="myText" جهت وارد کردن کلمه مورد نظر توسط کاربر و دکمه ای با آیدی id="search" نیز جهت جستجوی کلمه مورد نظر ایجاد کردیم.
قصد داریم این فرم را توسط کتابحانه jquery کنترل کنیم. پس آخرین نسخه Jquery را دانلود کنید و به سند HTML اضافه کنید.
در این سند چند تگ <p> داریم که هر کدام حاوی محتوا هستند . قصد داریم داخل هر تگ <p> جستجو را انجام دهیم. اگر کلمه مورد نظر یافت شد آن کلمه را بین تگ <mark> قرار داده تا به صورت انتخاب شده نمایش داده شود.
<!DOCTYPE html>
<html>
<head>
<title>Search in jquery</title>
<script src="js/jquery.js"></script>
</head>
<body>
<form>
<label>Search:</label>
<input type="text" id="myText">
<button id="search" type="button">Search</button>
</form>
<p>
ali is a good boy. he is a clever student. ali and ahmad are friends.
</p>
<p>
ali is a good boy. he is a clever student. ali and ahmad are friends.
</p>
<p>
ali is a good boy. he is a clever student. ali and ahmad are friends.
</p>
<p>
ali is a good boy. he is a clever student. ali and ahmad are friends.
</p>
</body>
</html>
در این صفحه کاربر باید کلمه مورد نظر را تایپ کند سپس روی دکمه search کلیک کند. پس روی رویداد click دکمه search کد نویسی را شروع می کنیم. قبل از این کار ابتدا تابعی با نام markSelection را میسازیم. این تابع وظیفه جستجوی عبارت مورد نظر در محتوا و mark کردن آن ها را دارد. تابع markSelection به شکل زیر نوشته می شود.
function markSelection(){
clearSelection()
var myText = $('#myText').val();
var regExp = new RegExp(myText,'g')
$('p').each(function(){
var html = $(this).html();
var newHtml = html.replace(regExp,'<mark>'+myText+'</mark>');
$(this).html(newHtml);
})
}
توضیح عملکرد کدهای jquery:
در تابع markSelection ایتدا توسط تابع clearSelection کلیه عبارتهای از قبل mark شده را به حالت عادی بر می گردانیم. درباره تابع clearSelection در ادامه بیشتر توضیح خواهیم داد. سپس متن وارد شده را برابر myText قرار می دهیم. در ادامه نمونه ای از شی RegExp می سازیم و برابر regExp قرار می دهیم. توسط شی RegExp عملیات عبارت مورد نظر را تبدیل به عبارت باقاعده می کنیم و پارامتر modifiers آن را برابر g قرار می دهیم تا شی نمونه های تکراری را نیز بیابد.
سپس توسط each کلیه تگ های <p> در صفحه را کنترل می کنیم و کلمه مورد نظر را داخل تگ <mark> قرار داده و سپس با کلمه اصلی جابه جا می کنیم.
توجه داشته باشید که کاربر اگر دو بار جستجو کند کلمه قبلی همچنان به صورت mark باقی می ماند. پس ابتدا باید کلمه قبلی را از حالت <mark> خارج کرده و سپس جستجو را برای عبارت جدید آغاز میکنیم. به همین منظور تابعی با نام clearSelection را به این صورت می سازیم و در تابع markSelection قبل از شروع جستجو فراخوانی می کنیم.
function clearSelection(){
$('p').each(function(){
$(this).find('mark').each(function(){
$(this).replaceWith($(this).html())
})
})
}
در تابع clearSelection کلیه تگهای <mark> را توسط find پیدا میکینم و سپس کل تگ <mark> و محتویاتش را با همان محتویاتش جابه جا می کنیم. به این صورت تگ بازوبسته <mark> حذف می شود.
نظرات کاربران