কম্পিউটার টিউটোরিয়াল

HTML DOM Input Search autocomplete প্রোপার্টি

HTML DOM Input Search autocomplete প্রোপার্টি

HTML DOM Input Search autocomplete প্রোপার্টি <input> এলিমেন্টের type="search" এর 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" এবং autocomplete="on" সেট করে একটি <input> এলিমেন্ট তৈরি করা হয়েছে। এটি নিশ্চিত করে যে টেক্সট পূর্বের ইনপুটের ভিত্তিতে কমপ্লিট হবে। সার্চ ফিল্ডটি একটি ফর্মের ভিতরে থাকে যাতে একটি সাবমিট বাটনও আছে সার্ভারে ফর্ম ডেটা জমা দিতে।
  • তারপর একটি "Autocomplete Off" বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে changeAuto() মেথড এক্সিকিউট করবে।
  • changeAuto() মেথড getElementById() ব্যবহার করে type="search" ইনপুট এলিমেন্টটি পায় এবং এর autocomplete অ্যাট্রিবিউটের মান off সেট করে। এর মানে এখন টেক্সট অটোকমপ্লিট হবে না এবং ইউজারকে পুরো টেক্সট ম্যানুয়ালি টাইপ করতে হবে। এই পরিবর্তন সম্পর্কে মেসেজ প্যারাগ্রাফে (আইডি "Sample") innerHTML প্রোপার্টি ব্যবহার করে দেখানো হয়।
function changeAuto() { 
    document.getElementById("SEARCH1").autocomplete = "off"; 
    document.getElementById("Sample").innerHTML = "Your text will not autocomplete now"; 
}
  1. HTML DOM ইনপুট সার্চ type প্রপার্টি

  2. HTML DOM ইনপুট সার্চ size প্রপার্টি

  3. HTML DOM ইনপুট সার্চ required প্রপার্টি

  4. HTML DOM ইনপুট টেক্সট autocomplete প্রপার্টি