React Custom Autocomplete Component

React ile Custom Autocomplete Yapıyoruz

Bir input ile arama yapacağımız zaman aramayı tamamlamak kullanıcı deneyimi açısından oldukça önemli bir rolü var.

Örneğin, google da bir arama yaptığınızda yazdığınız şeyi tamamlayarak bir liste şeklinde size sunar ve yazmaya devam etmeye gerek kalmadan sonuçlardan birine tıklamak yeterli.

Elbette google arama kutusunun arkasında birçok algoritma yer alıyor ama biz şimdi React projelerinizde kullanabileceğimiz bir Autocomplete input yapacağız.

Ne yapacağımza bakalım.

[embed]Demo

Bileşen stilleri için styled component kullanacağız o yüzden öncelikle bu paketi react projenize dahil edin.

npm install — save styled-components

Autocomplete component için functional component oluşturuyoruz.

Temel olarak props ihtiyaçlarımızı belirleyelim, ihtiyaca göre geliştirilebilir. aşağıda olduğu gibi

value: initial yani seçilen değeri alıyoruz, eğer value var ise onu seçilmiş olan options olarak gösteriyoruz.

options: Autocompleteseçeneklerinin olduğu array. [“Option1”,”Option2”]

placeholder: Herhangi bir value yok veya seçilmiş olan bir option yok ise yer tutucu olarak göstermek için alıyoruz.

onChange: Olmazsa olmaz onChange bir function alır, herhangi bir option değiştiğinde geriye değiştiren değerin ne olduğunu dönmesi için.

hilightSearchText fonksiyonu yaptığımız aramada içeren kelimeyi belirgin hale getirmek için uyguluyoruz. Döndüğümüz değer html çıktısı olacağı için çok önerilmese de bu alanda ListItem içerisinde dangerouslySetInnerHTML ekledim.

Autocomplete.js aşağıda paylaşıyorum.

[embed]Autocomplete.js Code

Umarım faydalı olmuştur.