كيفاش تبحث على كلمة وتعرضها باستخدام jquery
فهاد الدرس من كيفاش تبحث على كلمة وتعرضها باستخدام jquery غادي نشوفو كيفاش نبحثو على كلمة فواحد النص ونعرضوها الدرس بسيط للمبتدئين.
نظرة سريعة بالفيديو
- الملفات الأساسية
غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه wordFinder من بعد غادي تزيد فيه 3 ديال المجلدات css و js و includes منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css وتزيد ملف تسميه script.js ف js من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php فincludes الملف header.php الكود ديالو هو :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Word Finder</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style type="text/css">
.highlight{
background-color:yellow;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Word Finder</a>
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Accueil <span class="sr-only"></span></a></li>
</ul>
</div>
</nav>
- الملف footer.php
هاد الملف غادي يكون هو الأساس ديال كل الصفحات الخاصة بجهة الزوار ولي غادي يربط ملفات js بالملفات ديالنا.
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>
- الملف script.php
هادا الملف لي غادي يكون فيه الكود لي غادي يمكنا من البحث فأولا كنسترجع كل حرف دخلو المستخدم فالحقل لي كاين ف index.php منبعد كنرسلو للfindWord لي كتسترجع النص لي عندي ف index.php منبعد كنخدم بexpression régulière لي يمكنلك تبحث عليها فغوغل ولي كتمكن من البحث على كل الحروف لي كاينين فالنص كيطابقو القيمة لي دخل المستخدم فيلا لقات كلمة كتطابق ما كيبحث عليه المستخدم كتعرضها وتزيدلها لclass highlight لي كاينة ف header.php مكنش كتحيد لclass highlight الكود ديال الملف هو :
$(document).ready(function(){
$('#searchBox').keyup(function(){
findWord($(this).val());
});
});
function findWord(word){
if(word){
var text = $('#text').text();
var wordReg = new RegExp(word,"ig");
var matches = text.match(wordReg);
if(matches){
$("p").html(text.replace(wordReg,function(match){
return "<span class='highlight'>"+match+"</span>";
}));
}else{
$('.highlight').removeClass('highlight');
}
}else{
$('.highlight').removeClass('highlight');
}
}
- الملف index.php
منبعد فالمجلد الرئيسي كنزيد ملف جديد index.php هادا الملف الرئيسي ديالنا لي غادي يتم فيه عرض النص وinput Text لي غادي يمكنا من البحث على الكلمة داخل النص الكود ديالو هو :
<body>
<?php include("includes/header.php");?>
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-4">
<body>
<div class="form-group">
<input type="text" class="form-control" id="searchBox">
</div>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis facilisis felis. Donec dignissim commodo laoreet. Etiam rutrum pretium urna sit amet rutrum. Pellentesque massa diam, molestie vitae orci a, faucibus tempus nisi. Praesent dictum ut neque porttitor scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pulvinar quam sapien, id accumsan sapien blandit vel. Sed quis tincidunt ante, sit amet commodo justo. Ut vel ipsum in ipsum pharetra blandit. Vestibulum nec ante nibh.</p>
</body>
</div>
</div>
</div>
<?php include("includes/footer.php");?>