Aslında bu datalisti bir bakıma autocomplete gibi algılayabiliriz. Var olan dataların anahtar kelimelerini girerek bulmamızı sağlayan bir araç. Kullanımı ise şu şekilde;

Bir adet input oluşturuyoruz type=”text” olacak fakat ekstra olarak list=”data” özelliğini girmemiz gerekiyor.

Daha sonra ise bir adet datalist oluşturup içine optionlarla verilerimizi yazıyoruz. Yani şu şekilde kodlarımızın olması gerekiyor.

Arama yapmak istediğiniz ili yazınız veya seçiniz : <br /> <br />
<input type="text" list="data" />
	<datalist id="data">
  		<option>İstanbul</option>
	  	<option>Ankara</option>
		  <option>Mersin</option>
		  <option>İzmir</option>
		  <option>Isparta</option>
		  <option>İzmit</option>
	</datalist>

Canlı örneğimizi görecek olursak;

See the Pen jPvejp by Uğur (@ugurturkmen) on CodePen.