जावास्क्रिप्ट में ऑटोकम्प्लीशन

अब हम ऑटोकम्प्लीशन लागू करेंगे। इस शब्द का अर्थ है इनपुट में टेक्स्ट डालते समय ड्रॉप-डाउन संकेत। आइए एक उदाहरण देखें। नीचे मैंने एक इनपुट बनाया है, जिसमें आप किसी देश का नाम डाल सकते हैं। इसके साथ ही, यदि आप कुछ अक्षर डालते हैं, तो इनपुट के नीचे उन देशों की सूची दिखाई देगी, जो डाली गई स्ट्रिंग से शुरू होते हैं।

यदि चाहें तो, पूरा देश का नाम डाले बिना, माउस से किसी भी देश पर क्लिक कर सकते हैं और वह इनपुट में दिखाई देगा। असल में, इसके लिए ही ऑटोकम्प्लीशन की आवश्यकता होती है। उदाहरण में सरलता के लिए मैंने केवल तीन देश बनाए हैं: 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;
}