6
تشکر

جستجوی لحظه ای در لیست با پلاگین apSearcher

جی کوئری

جی کوئری

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

مشاهده دمو

برای استفاده از این پلاگین ابتدا فایل jquery.apSearcher.js را به همراه کتابخانه جی کوئری به صفحه خودتان متصل کنید:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.apSearcher.js"></script>

در قدم بعدی شما ابتدا باید لیست خودتان را آماده کرده باشید. برای مثال لیست من در صفحه دمو مانند زیر است:

<div class="list">
    <img src="1.jpg" class="pic" />
    <h4 class="title">عنوان</h4>
    <p>
        متن
    </p>
</div>

یعنی هر کدام از لیست های من دارای کد HTML بالا هستند و فقط عنوان و متن آنها تغییر میکند. حالا ما میخواهیم کاربر جستجو را برای عنوان انجام دهد. یعنی عملیات جستجو باید با متن داخل h4.title مطابقت داشته باشد. اما ابتدا باید فرم جستجو را هم درست کرد.

<div class="search win">
    <label>جستجو:</label>
    <input type="text" name="search" id="search" />
</div>

خوب الان همه چیز کامل است. در قسمت head صفحه کد زیر را قرار میدهیم:

<script type="text/javascript">
    $(document).ready(function(){
      $.apSearcher({
        container: '.list',
        searcher: '.list .title',
        input: '.search #search'
      });
    })
</script>

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

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

<script type="text/javascript">
    $(document).ready(function(){
      $.apSearcher({
        container: '.win .list',
        searcher: '.win .list .title',
        input: '.search #search',
        auto_focus: 'on'
      });
    })
</script>

مشاهده دمو

دانلود دمو

مطالب مرتبط

آموزش مقدماتی ساخت پلاگین جی کوئری

پلاگین جی کوئری apSlider v1

  • سمیرا می‌گه:

    با سلام و ممنون از راهنماییهای مفیدتان
    میخواهم در سایتم که با html و جاوا اسکریپت نوشتم برای آن قابلیت جستجو قرار دهم که با iframe محتوا فایل pdf نمایش می دهم می خوام قابلیت جستجو برروی فایل pdf در سایتم قرار بدهم.البته یکبرنامه دانشجویی است


  • نظرات این مطلب بسته است.