Membuat Autocomplete Kota dengan Javascript

Autocomplete merupakan sebuah cara untuk mempermudah dalam pencarian suatu nama, autocomplete bisa kita temui pada sebuah peta google dimana ketika kita mengetikan alamat maka akan secara otomatis nama alamat yang tampil secara ototmatis. Pada kasus berikut ini adalah pencarian nama kota pada sebuah form akan ditampilkan secara otomatis dengan fungsi javascript yang telah dibuat dan disesuaikan, berikut adalah langkah-langkah dalam Membuat Autocomplete Kota dengan Javascript.

Pada pembuatan form autocomplete hal pertama adalah kita membuat sintak form HTML5 seperti berikut.

<body>
	<form class="form-cari">
	  <input type="text" class="cari" placeholder="Enter a city or state...">
	  <ul class="suggestions">
	  </ul>
	</form>
</body>

Setelah membuat form, selanjutnya kita akan berikan sedikit desain agar tampilan terlihat rapi dengan sintak CSS3 berikut.

@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
  box-sizing: border-box;
  background: #34495e;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 200;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

input {
  width: 100%;
  padding: 20px;
}

::-webkit-input::placeholder {
  color: #7e899c;
}

::-moz-placeholder {
  color: #7e899c;
}

input::placeholder {
  color: #7e899c;
}

.form-cari {
  max-width: 400px;
  margin: 50px auto;
}

input.cari {
  margin: 0;
  text-align: center;
  outline: 0;
  border: none;
  width: 120%;
  left: -10%;
  position: relative;
  top: 10px;
  z-index: 2;
  border-radius: 5px;
  font-size: 28px;
  -webkit-box-shadow: 0 5px 10px rgba(75, 72, 72, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(75, 72, 72, 0.2);
  box-shadow: 0 5px 10px rgba(75, 72, 72, 0.2);
  font-family: 'Roboto', sans-serif;
  color: #484e64;
}

.suggestions {
  padding: 0;
  position: relative;
}

.suggestions li {
  background: #fff;
  list-style: none;
  border-bottom: 1px solid #d0d6f0;
  margin: 0;
  padding: 20px;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}

span.population {
  font-size: 14px;
  margin-top: 3px;
}

.hl {
  background: #fed280;
}

Setelah desain dibuat, langkah terakhir adalah memberikan fungsi dan library nama kota untuk pencarian pada form dengan sintak javascript berikut.

	const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

	const cities = [];

	fetch(endpoint)
	  .then(blob => blob.json())
	  .then(data => cities.push(...data))

	function findMatches(wordToMatch, cities) {
	  return cities.filter(place => {
	    const regex = new RegExp(wordToMatch, 'gi');
	    return place.city.match(regex) || place.state.match(regex)
	  });
	}

	function numberWithCommas(x) {
	  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	}

	function displayMatches() {
	  const matchArray = findMatches(this.value, cities);
	  const html = matchArray.map(place => {
	    const regex = new RegExp(this.value, 'gi');
	    const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
	    const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
	    return `
	      <li>
	        <span class="name">${cityName}, ${stateName}</span>
	        <span class="population">${numberWithCommas(place.population)}</span>
	      </li>
	    `;
	  }).join('');
	  suggestions.innerHTML = html;
	}

	const cariInput = document.querySelector('.cari');
	const suggestions = document.querySelector('.suggestions');

	cariInput.addEventListener('change', displayMatches);
	cariInput.addEventListener('keyup', displayMatches);

Setelah semua sintak diatas telah diketikan semua, simpan file dengan format html kemudian jalankan dibrowser masing-masing dan lihat hasil nya, maka ketika kita ketikan awalan huruf atau kalimat nama kota akan tampil nama kota sesuai dengan library pada javascript yang telah dibuat. Baik cukup sekian artikel mengenai bagaimana Membuat Autocomplete Kota dengan Javascript. semoga bermanfaat dan selamat mencoba 🙂

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *