JavaScript-ზე ავტოდასრულება

ახლა ჩვენ განვახორციელებთ ავტოდასრულებას. ამ ტერმინით ვგულისხმობთ ჩამოსაშლელ მინიშნებას ტექსტის ველში შეყვანისას. მოდით შევხედოთ მაგალითს. ქვემოთ მე გავაკეთე ველი, რომელშიც შეგიძლიათ შეიყვანოთ ქვეყნის სახელი. ამ შემთხვევაში, თუ შეიყვანთ რაიმე ასოს, ველის ქვემოთ გამოჩნდება ქვეყნების სია, რომლებიც იწყება შეყვანილი სტრიქონით.

სურვილის შემთხვევაში შესაძლებელია, რომ არ ჩაწეროთ ქვეყნის სახელი მთლიანად, მაუსით დააწკაპუნოთ ნებისმიერ ქვეყანაზე და ის გამოჩნდება ველში. ამისთვის, ზოგადად, ავტოდასრულება და საჭიროა. მაგალითში სიმარტივისთვის მე მხოლოდ სამი ქვეყანა გავაკეთე: Belarus, Belgium და Bulgaria. შეიყვანეთ ქვემოთ მოცემულ ველში ჯერ სიმბოლო 'B' ინგლისურად, შემდეგ კი 'e' და ნახეთ, რა მოხდება:

განხილვა

მოდით განვიხილოთ, როგორ მოვაგვაროთ ამოცანა. საჭიროა გაკეთდეს მასივი ქვეყნების სახელებით. ჩემთან ის ასეთია:

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

ტექსტის ველში შეყვანისას საჭიროა ყოველი სიმბოლოს შეყვანისას მოიძიოთ მასივი ქვეყნებით და მიიღოთ ქვეყნები, რომლებიც იწყება შეყვანილი სტრიქონით. ეს მოსახერხებელია მეთოდების filter და startsWith გამოყენებით.

filter-ის საშუალებით შესაძლებელია მიიღოთ მასივი ქვეყნებისა, რომლებიც იწყება შეყვანილი სტრიქონით. შემდეგ საჭიროა მოიძიოთ ეს მასივი ციკლით და შეავსოთ სია ul ქვეყნების ელემენტებით. და ასე საჭიროა გაკეთდეს ყოველი სიმბოლოს შეყვანისას, წინასწარ წაშალოთ ul-დან ადრე შექმნილი ელემენტები.

თქვენი მოხერხებულობისთვის ვაწვდი მზა ვერსიას:

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

#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;
}

თქვენთვის დააკოპირეთ მოცემული HTML და CSS კოდები. განახორციელეთ ავტოდასრულება აღწერილი ალგორითმის შესაბამისად.