HTML DOM Input Search autocomplete प्रॉपर्टी

HTML DOM Input Search autocomplete प्रॉपर्टी, type="search" वाले <input> एलिमेंट के autocomplete एट्रिब्यूट से जुड़ी होती है। autocomplete एट्रिब्यूट "on" या "off" मान लेता है। "on" मान निर्दिष्ट करता है कि वेब ब्राउज़र को पिछले इनपुट के आधार पर यूजर के टेक्स्ट को स्वचालित रूप से पूरा करना चाहिए, जबकि "off" इसके विपरीत दर्शाता है।

सिंटैक्स

Autocomplete प्रॉपर्टी सेट करने का सिंटैक्स:

searchObject.autocomplete = "on|off"

यहां, "on" का अर्थ है कि वेब ब्राउज़र पिछले इनपुट के आधार पर यूजर इनपुट को स्वचालित रूप से पूरा करेगा, जबकि "off" का अर्थ है कि यह पिछले इनपुट के आधार पर यूजर इनपुट को पूरा नहीं करेगा। इसका डिफ़ॉल्ट मान "on" होता है।

उदाहरण

Input Search autocomplete प्रॉपर्टी का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <body> 
<h1>Input Search autocomplete property</h1> 
<form action="/Sample_page.php"> 
  FRUITS: <input type="search" id="SEARCH1" name="fruits" autocomplete="on"><br><br> 
  <input type="submit"> 
</form> 
<p>नीचे दिए गए बटन पर क्लिक करके ऊपर दिए गए सर्च फील्ड में autocomplete बंद करें</p> 
<button onclick="changeAuto()">Autocomplete Off</button> 
<p id="Sample"></p> 
<script> 
  function changeAuto() { 
    document.getElementById("SEARCH1").autocomplete = "off"; 
    document.getElementById("Sample").innerHTML = "Your text will not autocomplete now"; 
  } 
</script> 
</body> </html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

HTML DOM Input Search autocomplete प्रॉपर्टी

उपरोक्त फील्ड में कुछ टेक्स्ट टाइप करने पर, आप देख सकते हैं कि आपका टेक्स्ट पिछले इनपुट के आधार पर ऑटोकम्प्लीट हो रहा है:

HTML DOM Input Search autocomplete प्रॉपर्टी

"Autocomplete Off" बटन पर क्लिक करने पर, ऑटो कम्प्लीट टेक्स्ट कैप्चर नहीं होगा:

HTML DOM Input Search autocomplete प्रॉपर्टी

उदाहरण की व्याख्या

हमने पहले type="search", name="fruits" वाला एक <input> एलिमेंट बनाया और इसके autocomplete एट्रिब्यूट को "on" पर सेट किया। यह सुनिश्चित करता है कि टेक्स्ट हमारे पिछले इनपुट के आधार पर पूरा होगा। सर्च फील्ड एक फॉर्म के अंदर है जिसमें फॉर्म डेटा को सर्वर पर सबमिट करने के लिए एक Submit बटन भी है।
फिर हम एक "Autocomplete Off" बटन बनाते हैं जो यूजर द्वारा क्लिक किए जाने पर changeAuto() मेथड को एक्जीक्यूट करता है।
changeAuto() मेथड getElementById() मेथड का उपयोग करके type "search" वाले <input> एलिमेंट को प्राप्त करता है और इसके autocomplete एट्रिब्यूट मान को "off" पर सेट करता है। इसका अर्थ है कि अब टेक्स्ट ऑटोकम्प्लीट नहीं होगा और यूजर को पूरा टेक्स्ट मैन्युअली टाइप करना होगा। फिर हम इस परिवर्तन के बारे में संदेश को id "Sample" वाले पैराग्राफ में इसकी innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित करते हैं।

function changeAuto() { 
  document.getElementById("SEARCH1").autocomplete = "off"; 
  document.getElementById("Sample").innerHTML = "Your text will not autocomplete now"; 
}