AJAX Live Search

हम क्या बना रहे हैं

Live search जैसे ही आप type करते हैं results दिखाता है, बिना button दबाए या page reload किए। यह तीन हिस्से जोड़ता है: HTML search box, AJAX इस्तेमाल करती कुछ JavaScript, और एक PHP file जो database query करती है। यह सीखने लायक सबसे लोकप्रिय असली features में से एक है।

AJAX कैसे काम करता है

1. User search box में type करता है।
2. JavaScript type किया text fetch() से एक PHP file को भेजता है।
3. PHP database खोजकर मेल खाते results लौटाता है।
4. JavaScript वो results page के box में डालता है — तुरंत।

Page कभी reload नहीं होता; सिर्फ़ results area बदलता है। यही इसे तेज़ और आधुनिक बनाता है।

Search box और JS

<input type="text" id="search" placeholder="Search...">
<div id="results"></div>

<script>
  const box = document.getElementById("search");
  box.addEventListener("input", function () {
      fetch("search.php?q=" + encodeURIComponent(box.value))
          .then(res => res.text())
          .then(html => {
              document.getElementById("results").innerHTML = html;
          });
  });
</script>

हर keystroke (input) पर JavaScript text को search.php भेजता है और जवाब results div में डालता है। encodeURIComponent text को URL के लिए सुरक्षित बनाता है।

PHP handler

<?php
  // search.php
  $q = $_GET["q"] ?? "";
  $stmt = $pdo->prepare(
      "SELECT name FROM students WHERE name LIKE ?"
  );
  $stmt->execute(["%$q%"]);
  foreach ($stmt->fetchAll() as $row) {
      echo "<p>" . htmlspecialchars($row["name"]) . "</p>";
  }
?>

Handler q पढ़ता है, matches ढूँढने को LIKE के साथ prepared statement चलाता है, और सुरक्षित HTML echo करता है जो JavaScript दिखाता है।

इसे सुरक्षित रखना

• Prepared statement: search term bind कीजिए, कभी SQL में मत चिपकाइए।
• Output escape: results को htmlspecialchars में लपेटिए ताकि XSS रुके।
• Debounce: type रुकने के बाद थोड़ा रुकिए, ताकि हर अक्षर पर server न मारें।
• छोटी queries छोड़िए: 2 characters से छोटी searches अनदेखा कीजिए।

आम गलतियाँ

• Search term को SQL में चिपकाना। LIKE ? के साथ prepared statement इस्तेमाल कीजिए।
• Results escape न करना। Un-escaped names XSS ला सकते हैं — htmlspecialchars इस्तेमाल कीजिए।
• हर keystroke पर search करना। server को flood करने से बचने को debounce देरी जोड़िए।
• encodeURIComponent भूलना। इसके बिना special characters URL तोड़ देते हैं।

सारांश

• Live search type करते ही results update करता है, बिना page reload।
• AJAX (fetch से) text PHP को भेजता है और जवाब दिखाता है।
• PHP matches ढूँढने को LIKE के साथ prepared statement इस्तेमाल करता है।
• सुरक्षा और speed को output escape कीजिए और debounce इस्तेमाल कीजिए।
• jQuery की ज़रूरत नहीं — आधुनिक fetch काफ़ी है।

आगे, query हिस्सा सुरक्षित कीजिए prepared statements से, या structured data लौटाइए PHP JSON से।