Öneri Listeli Denetimli Girdi

Bir otomatik tamamlama bileşeninin iki ana bölümü vardır: denetimli bir metin girişi ve açılır bir öneri listesi. Giriş normal belge akışında yer alır, açılır liste ise doğrudan altında mutlak olarak konumlandırılır. Birlikte tek bir etkileşimli denetim gibi çalışırlar; ancak ayrı DOM öğeleridir.

Dört durum değişkenine ihtiyacınız vardır: inputValue (dize — yazılan metin), suggestions (dizi — mevcut eşleşen öğeler), isOpen (mantıksal değer — açılır listenin görünür olup olmadığı) ve selectedIndex (sayı — klavye gezinmesi için hangi önerinin vurgulandığı; hiçbiri seçilmediğinde -1 ile başlar).

Girişi tamamen denetimli hâle getirin: value={inputValue} ve onChange={e => setInputValue(e.target.value)}. Bu, görüntülenen metnin tüm denetimini React'e verir. Her tuş vuruşu durumu günceller ve yeni değerle yeniden işlemeyi tetikler. Otomatik tamamlama için hiçbir zaman denetimsiz giriş kullanmayın; değeri programlı olarak okumanız ve ayarlamanız gerekir.

Öneriler yerel bir diziden geldiğinde, her işlemede inputValue temelinde filtre uygulayın: her öğeyi item.toLowerCase().includes(inputValue.toLowerCase()) kullanarak karşılaştırın. Liste büyükse her yeniden işlemede yeniden hesaplamayı önlemek için bunu useMemo ile hesaplayabilirsiniz. Küçük listelerde satır içinde filtreleme yeterlidir.

inputValue.length > 0 ve suggestions.length > 0 olduğunda açılır listeyi açın. Giriş odağını kaybettiğinde (öneri tıklamalarının önce kaydedilebilmesi için küçük bir gecikmeyle), bir öneri seçildiğinde veya Kaçış tuşuna basıldığında listeyi kapatın. Koşullu oluşturmayı yönlendirmek için isOpen değerini buna göre ayarlayın.

onBlur olayı, giriş odağını kaybettiğinde tetiklenir; bu durum kullanıcı bir öneriye tıkladığında gerçekleşir. Odak kaybında açılır listeyi hemen kapatırsanız öneriye yapılan tıklama kaydedilmez, çünkü tıklama gerçekleşmeden önce liste kaybolur. Tıklamanın kaydedilmesi için zaman tanımak üzere setTimeout(() => setIsOpen(false), 150) kullanın.

Açılır listeyi position: absolute ile konumlandırın; böylece girişi aşağı itmek yerine altındaki içeriğin üzerine yerleşir. Diğer içeriğin üzerinde görünmesi için yüksek bir z-index (100+) ayarlayın. Çok sayıda sonuç olduğunda listenin aşırı uzamasını önlemek için overflow-y: auto ile birlikte bir max-height belirleyin.

Her öneri öğesinde bir onClick işleyicisi bulunmalıdır: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Bu, girişi seçilen öneriye ayarlar ve açılır listeyi kapatır. Seçim anında ve doğal hissettirir; bu da kullanıcıların otomatik tamamlama alanlarından beklediği davranışla uyumludur.

Odak kaybı için zaman aşımı gecikmesi kullanmaya alternatif olarak her öneri öğesinde onMouseDown={e => e.preventDefault()} kullanabilirsiniz. Bu, fare basma olayının girişteki odağı almasını önler; böylece bir öneriye tıklanırken odak kaybı olayı tetiklenmez. Giriş odağını korur ve tıklama işleyicisi sorunsuz biçimde çalışır.

İyi bir otomatik tamamlama bileşeni klavyeyle kullanılabilmelidir. Kullanıcı ilk öneriyi vurgulamak için ArrowDown tuşuna basabilmeli, liste içinde aşağı ilerlemek için bu tuşa basmaya devam edebilmeli, seçmek için Giriş tuşuna basabilmeli ve seçim yapmadan kapatmak için Kaçış tuşuna basabilmelidir. Bu işlem, giriş öğesindeki onKeyDown olayının işlenmesiyle uygulanır.

Kullanıcı her yazdığında ve inputValue değiştiğinde selectedIndex değerini -1 olarak sıfırlayın. Bu, önceki klavye seçimini temizler; böylece yeni filtrelenmiş öneri kümesinde hiçbir öğe vurgulanmış olmaz. Liste değiştikten sonra farklı bir öğeye işaret eden güncel olmayan bir seçim dizini kafa karıştırıcı ve hatalıdır.

Bir odak kaybı gecikmesine güvenmek yerine öneri öğelerinde neden onMouseDown ile e.preventDefault() kullanılır?

Bir otomatik tamamlama denetimi dört durum değişkenine ihtiyaç duyar: inputValue, öneriler, isOpen ve selectedIndex. Denetimli bir giriş kullanın, önerileri girişe göre filtreleyin ve açılır listenin görünürlüğünü isOpen aracılığıyla yönetin. Odak kaybından önce tıklama yarış koşulunu ya bir zaman aşımıyla ya da onMouseDown preventDefault kullanarak ele alın. Giriş değiştiğinde selectedIndex değerini sıfırlayın.