জাভাস্ক্রিপ্টে অটোকমপ্লিট

এখন আমরা অটোকমপ্লিট বাস্তবায়ন করব। এই শব্দটি দ্বারা ইনপুটে টেক্সট টাইপ করার সময় ড্রপ-ডাউন সুপারিশ বোঝানো হয়। আসুন একটি উদাহরণ দেখি। নিচে আমি একটি ইনপুট তৈরি করেছি, যেখানে কোনো দেশের নাম টাইপ করা যেতে পারে। একই সময়ে, যদি কিছু অক্ষর টাইপ করা হয়, তাহলে ইনপুটের নিচে সেইসব দেশের তালিকা দেখা যাবে, যা টাইপ করা স্ট্রিং দিয়ে শুরু হয়।

ইচ্ছে করলে, পুরো দেশের নাম টাইপ না করে, মাউস দিয়ে যে কোনো দেশে ক্লিক করলেই সেটি ইনপুটে চলে আসবে। মূলত এই জন্যই অটোকমপ্লিটের প্রয়োজন। উদাহরণে সরলতার জন্য আমি মাত্র তিনটি দেশ রেখেছি: Belarus, Belgium এবং Bulgaria। নিচের ইনপুটে প্রথমে ইংরেজি 'B' অক্ষরটি টাইপ করুন, তারপর 'e' টাইপ করুন এবং দেখুন কী হয়:

আলোচনা

আসুন সমস্যাটি কীভাবে সমাধান করা যায় তা আলোচনা করি। দেশের নাম সহ একটি অ্যারে তৈরি করতে হবে। আমার কাছে এটি এমন:

javascriptlet arr  = ['Belarus', 'Belgium', 'Bulgaria'];

ইনপুটে টেক্সট টাইপ করার সময়, প্রতি বার একটি অক্ষর টাইপ করার সময় দেশগুলির অ্যারেটি খুঁজে দেখতে হবে এবং সেইসব দেশ পাওয়া যাবে যেগুলি টাইপ করা স্ট্রিং দিয়ে শুরু হয়। এটি filter এবং startsWith পদ্ধতি ব্যবহার করে সুবিধাজনকভাবে করা যায়।

filter ব্যবহার করে টাইপ করা স্ট্রিং দিয়ে শুরু হওয়া দেশগুলির অ্যারে পাওয়া যাবে। তারপর এই অ্যারেটি একটি লুপ দিয়ে ঘুরিয়ে দেখতে হবে এবং ul তালিকাটি দেশ সহ লি আইটেম দিয়ে পূরণ করতে হবে। এবং এটি প্রতি বার একটি অক্ষর টাইপ করার সময় করতে হবে, আগে থেকে ইউএল থেকে আগে তৈরি করা লি আইটেমগুলি মুছে দিয়ে।

আপনার সুবিধার জন্য আমি প্রস্তুত মার্কআপ দিচ্ছি:

html<div id="parent">
  <input id="elem">
  <ul id="list"></ul>
</div>
text text text text text

css#parent {
  position: relative;
}
#elem {
  padding: 5px;
  font-size: 18px;
}

#parent ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: white;
}
#parent li {
  border: 1px solid gray;
  font-size: 18px;
  padding: 5px;
}
#parent li:hover {
  border: 1px solid black;
  cursor: pointer;
}