Select2 İle Arama Kutulu Selectbox Yapmak

Herkese Merhaba,

Select2 son derece kullanışlı ve konfigüre edilebilir gayet güzel bir eklenti. Şu an üzerinde çalıştığım projede kullandım ve çok memnum kaldığım için sizlerle de paylaşmak istedim. Hemen incelemeye başlayalım.

select2.github.io adresine giderek eklentiyi indirebilirsiniz. Burada zaten aslında kullanımı hakkında gayet açıklayıcı bilgiler verilmiş ama ben yine de açıklayayım tekrar.

İsterseniz eklentiyi indirerek isterseniz de CDN üzerinden eklentiyi kullanabilirsiniz. Ben CDN üzerinden kullanmayı tercih ediyorum. Aşağıdaki kodları alıp head etiketleri arasına yapıştırdığınızda eklentiyi kullanmaya hazırsınız demektir.

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

Dosyalarımızı çağırdık, şimdi de bir tane selectbox oluşturalım ve içerisine biraz veri girelim.

<select>
  <option value="1">1. Result</option>
  <option value="2">2. Result</option>
  <option value="3">3. Result</option>
  <option value="4">4. Result</option>
  <option value="5">5. Result</option>
  <option value="6">6. Result</option>
  <option value="7">7. Result</option>
  <option value="8">8. Result</option>
  <option value="9">9. Result</option>
  <option value="10">10. Result</option>
</select>

Şimdilik 10 tane veri yeterli. Şimdi tek yapmamız gereken şey bu selectbox’ı seçip buna select2 özelliği eklemek.

Hemen yeni bir script etiketi açalım (önceden oluşturduklarımızın sonrasına) ve içerisine şu kodu yazalım.

$(function() {
  $('select').select2();
})

Yapmamız gereken tek şey buydu, arama kutulu selectboxımız hayırlı olsun 😁

Şaka değil, gerçekten bu kadar, şimdi sadece birkaç tane ekstra ayardan bahsedeceğim.

Öncelikle multiple olayından bahsedeyim. Bazı durumlarda selectbox içerisinden kullanıcının birkaç tane veri seçmesini isteyebilirsiniz. Bu tarz durumlarda selectboxlara multiple özelliği vermeniz gerekir. tek yapmanız gereken selectboxa multiple=”multiple” şeklinde bir attribute vermek. Hemen verelim.

<select multiple="multiple">
  ...
</select>

Bunu yaptığınız zaman artık kullanıcının CTRL veya Command tuşlarına basılı tutarak birden fazla veri seçebilecek. Bu tarz durumlar için de select2’nun çok güzel bir özelliği var, sürpriz olsun siz kendiniz deneyip bakın 🙂

Multiple selectbox yapmak bu kadar, bu bölümü atlamış olduk. Hemen kalan birkaç özelliğimize bakalım.

placeholder

Kullanıcımız herhangi bir seçeneği seçmediği zaman görünecek yazı bu olacak. Ama bunu tek başına kullanamıyoruz. Bunu kullanmak için yanında bir de allowClear özelliğini aktif etmemiz gerekiyor. Onun da ne olduğunu anlatıp örneği beraber vereyim.

allowClear

Allow Clear özelliğine true değeri verdiğiniz zaman selectboxımızın sağ tarafında bir çarpı işareti çıkıyor ve tıkladığımız zaman seçili sonucu iptal ediyor ve placeholder’da belirttiğimiz yazımız ortaya çıkıyor. Şimdi hemen kod örneğine geçelim.

 

$('select').select2({
  placeholder: "Lutfen bir secenek secin",
  allowClear: true
});

Seçeneklerimizi her zaman olduğu gibi bir nesne halinde veriyoruz. Bunun dışında da zaten ekstra bir şeyimiz yok, deneyebilirsiniz isterseniz.

closeOnSelect

Bu seçeneğe true değeri verdiğiniz zaman selectboxtan herhangi bir veri seçildiği zaman selectbox kapanacak, false verdiğiniz taktirde de selectboxtan bir veri seçtiğiniz zaman siz tekrar selectboxa tıklayana kadar selectbox kapanmayacaktır. Kullanımının diğerlerinden bir farkı yok.

$('select').select2({
  closeOnSelect: false
});

selectOnClose

Bu seçeneğe true değeri verdiğiniz zaman son olarak odaklandığınız (Klavye veya mouse ile üzerine geldiğiniz) eleman selectboxun kapanma işlemi sırasında seçilir. Örnek olarak ESC tuşu ile selectboxı kapatıyoruz. Mouseumuzu 3. Result yazan elemanın üzerine getirelim ama tıklamayalım. ESC tuşuna basıp selectboxı kapattığımız zaman 3. Result yazan elemanı otomatik olarak seçecek. Bu özelliğimiz de bu işe yarıyor.

Bu ders anlatacaklarım bu kadar. Videoları ve dersleri beğeniyorsanız lütfen beğen tuşuna basmayı veya bunu yorumlarda belirtmeyi ihmal etmeyin, sizlerden gelen yorumlar beni gerçekten çok mutlu ediyor. Aynı şekilde yanlışlarım, eksiklerim varsa da bunları da mutlaka belirtin.

Anlatacaklarım bu kadar, başka derslerde görüşmek üzere.

JQuery Mustafa Zahid Efe 3 yorum