jQuery Search Filter
JQuery Search Filter : जब भी हम कोई टेबल बनाते हैं और डेटाबेस से डाटा ला कर दिखाते हैं तो कभी कभी डाटा ज्यादा होने पर हमें Search ऑप्शन की जरुरत लगती हैं JQuery ने एक ऑप्शन दिया हैं जिससे हम Table या Div को आसानी से फ़िल्टर कर सकते हैं ।
इस वीडियो में आप देख सकते हैं की यह किस प्रकार work करेगा ।
विडिओ के माध्यम से समझने के लिए यंहा क्लिक करे
अपने पहले से लिखे Code में ऐड करना चाहे तो इन Steps के कर सकते हैं ।
How to create filter/Search List?
Step 1: Add CDN
Browser में JQuery को सपोर्ट करने के लिए हमें Script टैग में फाइल ऐड करना होगी, इस फाइल को आप डाउनलोड कर रुट डायरेक्टरी में भी रख सकते हैं, इस फाइल से ब्राउज़र jQuery को सपोर्ट करने लगता हैं ।
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
Step 2: Add Search Input Box or Search Box
अब हम जहा पर सर्च करने के इनपुट बॉक्स देना चाहते हैं वह पर इनपुट बॉक्स लगा दीजिये
<input placeholder="Search.." class="text" type="text" id="myInput" style="">Step 3: Add Script
अब यह स्क्रिप्ट आप Script टैग में लिखे
इसमें जो ध्यान देने वाली बात यह हैं की fbox और mbox क्लास को प्रॉपर उपयोग करना हैं इनसे ही सर्च में लाइन दिखने और छुपने का कार्य करती हैं ।
$(document).ready(function(){
$("#myInput").val('');
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".fbox .mbox").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});Step 4: HTML
इसमें fbox और mbox क्लास का ही Role हैं यदि आप टेबल पर अप्लाई कर रहे हैं तो यह क्लास टेबल पर लगा दे तो भी यह वर्क करेगा
<div class="fbox" style="">
<div class="mbox" style="">1. jQuery </div>
</div>
<div class="fbox" style="">
<div class="mbox" style="">2. PHP </div>
</div>
<div class="fbox" style="">
<div class="mbox" style="">3. My SQL </div>
</div>fbox: इस क्लास को Main Row पर लगाए जिस Row को Show/Hide करना हैं उस पर ।
mbox: जिस बॉक्स के टेक्स्ट को Search करना होता हैं उस पर यह क्लास Apply करते हैं ।
हमारे अन्य ARTICLE
- MySQL Aggregate Function
- MySQL Stored Procedures
- MySQL Trigger (Before/After)
- PHP Form Validations, Required, Filter
- PHP MySQL Connection
- Dropdown Retrieve from MySQL
- Learn C (Single Page Summary)
- Arduino Guide 2021 (Hindi)
- कीबोर्ड शॉर्टकट्स
यहाँ पर Full Code दिया हैं यदि आप Example के लिए समझना चाहते हैं तो यहाँ से पूरा Copy Paste कर लीजिये
Table Search jQuery Example for Div
<html>
<head>
<title>Search JQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#myInput").val('');
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".fbox .mbox").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</head>
<body>
<input placeholder="Search.." class="text" type="text" id="myInput" style="">
<div class="fbox" style="">
<div class="mbox" style="">1. jQuery </div>
</div>
<div class="fbox" style="">
<div class="mbox" style="">2. PHP </div>
</div>
<div class="fbox" style="">
<div class="mbox" style="">3. My SQL </div>
</div>
</body>
</head>Table Search jQuery Example for Table
इस Example मे jQuery Search Filter का उपयोग Table पर किस तरह कर सकते हैं उसके बारे मे बताया गया हैं ।
<html>
<head>
<title>Search JQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#myInput").val('');
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".fbox .mbox").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</head>
<body>
<input placeholder="Search.." class="text" type="text" id="myInput" style="">
<table id="tab" class="fbox">
<tr> <th>Language</th> </tr>
<tr class="mbox"> <td >jQuery </td></tr>
<tr class="mbox"> <td >PHP</td> </tr>
<tr class="mbox"> <td >My SQL</td> </tr>
</table>
</body>
</head>
आशा हैं मुझे की आपको jQuery Search Filter Code का उपयोग किस तरह करना हैं , समझ मे आ गया होगा । फिर भी यदि आपको इससे संबंधित कोई भी Doubt हो तो आप Comment करे ।
यह Article कैसा लगा हमे जरूर बताए ।
अपना कीमती समय देने के लिए धन्यवाद
