كيفاش تبحث على كلمة وتعرضها باستخدام jquery

imadbelasri Jquery
JQ

فهاد الدرس من كيفاش تبحث على كلمة وتعرضها باستخدام 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");?>
                                                        
                                                    

دروس ذات صلة

JQ

كيفاش تصاوب قائمة تسجل فيها أعمالك اليومية ب jquery

فهاد الدرس الجديد غادي نقادو واحد المشروع بسيط للمبتدئين ف jquery عبارة عن قائمة ديال notes لي كنسجل...


JQ

كيفاش trier table بإستعمال jquery

فهاد الدرس كيفاش trier table بإستعمال jquery غادي نشوفو كيفاش نرتبو البيانات لي عندنا فجدول البيانات...


JQ

كيفاش تصاوب ColorPicker ب jquery

فهاد الدرس من كيفاش تصاوب ColorPicker ب jquery غادي نشوفو كيفاش نهزو اللون من صورة بإستعمال jquery و...


JQ

كيفاش تبحث على كلمة وتعرضها باستخدام jquery

فهاد الدرس من كيفاش تبحث على كلمة وتعرضها باستخدام jquery غادي نشوفو كيفاش نبحثو على كلمة فواحد النص...


JQ

كيفاش تصاوب slider ب jquery

فهاد الدرس الجديد من سلسلة jquery غادي نشوفو كيفاش نقادو slider باستعمال jquery cycle plugin لي كيمك...


JQ

تطبيق للموقع ديالك ب jquery mobile

فأول تطبيق ب jquery mobile ولي اختارينا أنه يكون بسيط كبداية في إنتظار التطبيقات القادمة الي غادي تك...


JQ

تطبيق أفلام ب jquery mobile

فهاد التطبيق الثاني من سلسلة jquery mobile غادي نشوفوا كيفاش نقادو واحد التطبيق كيف قلنا فالفيديو لي...


JQ

كيفاش تزيد animate.css & wow.js للموقع ديالك

فهاد الدرس الجديد غادي نشوفوا كيفاش نزيدو animate.css و wow.js للموقع ديالنا فشنو كيمكنوني ندير هاد...


JQ

كيفاش تزيد jquery zooming للموقع ديالك

فهاد الدرس الجديد غادي نشوفوا كيفاش نزيدو jquery zooming للموقع ديالنا فشنو الدور ديال هاد ال plug...