Tagger.js

Youtube’ye yeni bir video eklerken video için etiket eklemenizi isteyen bir bölüm var. Bu bölümde virgül ile ayırarak yazdığınız kelimeler otomatik etikete dönüşüyor. Ayrıca WordPress kullanıcıları da az çok bilirler input alanına etiket eklerken aralara virgül koyduktan sonra virgülle ayrılmış bütün kelimeler ayrı ayrı etikete dönüşüyorlar.

Basettiğim bu iki örnek pek çok kişinin bildiği bir özellik değil mutlaka. Buna benzer herkesin bildiği Facebook var tabi. Herhangi bir şey paylaşmadan önce arkadaşlarımızı gönderiye etiketleyebiliyoruz Facebook üzerinden. Arkadaşlarımızın isimlerini yazmaya başladığımız andan itibaren otomatik tamamlama özelliği devre giriyor ve yazdığımız harflere en yakın kişiler listeleniyor.

Web sitenize buna benzer bir özellik eklemek istiyorsanız eğer Nick Palmer tarafından geliştirilmiş olan jQuery Tagger uygulaması tam da bunun için hazırlanmış. Demo sayfasında yazmaya başladığınız andan itibaren otomatik tamamlama devreye giriyor ve seçtiğiniz kişinin ismi etiket olarak input alanına ekleniyor. Dilerseniz verilerinizi .json dosyasından da otomatik tamamlama ile inputta gösterebilirsiniz.

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Js, css ve json dosya adresleri :

  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <link rel="stylesheet" type="text/css" href="../src/tagger.css" />
  <script src="../src/tagger.js"></script>  
  <script src="data.json"></script>

JavaScript :

Kapsamlı çoklu seçim

 <script>
    $(function(){
      $('#sel1').tagger({
        availableTags: peopleData
      , baseURL: '..'
      });
    });
  </script>

Çoklu seçim

<script>
    $(function(){
      $('#sel2').tagger({
        availableTags: peopleData
      , baseURL: '..'
      , placeholder: 'Person'
      , caseSensitive: true
      , displayHierarchy: true
      , indentMultiplier: 2
      , tabindexOffset: 100
      , noSuggestText: 'No People Match'
      , fieldWidth: '40em'
      , suggestMaxWidth: '70em'
      });
    });
  </script>

Tekli Seçim

<script>
    $(function(){
      $('#sel3').tagger({
        availableTags: peopleData
      , baseURL: '..'
      , placeholder: 'Email'
      , tabindexOffset: 200
      , suggestMaxHeight: '6em'
      });
    });
  </script>

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

        <select name="sel2" id="sel2" size="11" multiple="">
          <option value="item0">Jonah Eldredge</item>
          <option value="item1">Ray Duran</item>
          <option value="item2">Gavin Kovach</item>
          <option value="item3">Lawrence Nesmith</item>
          <option value="item4">Sebastian Seneca</item>
          <option value="item5">Marshall Klemme</item>
          <option value="item6">Grace Vashon</item>
          <option value="item7">Magaret Farwell</item>
          <option value="item8">Lenora Desrosier</item>
          <option value="item9">Tammi Severt</item>
          <option value="item10">Sandra Talbert</item>
        </select>

Html kodlarda dikkat ederseniz value=”item0″, value=”item1″, value=”item2″ gibi değerleri görebilirsiniz. Bu değerler json dosyasında kayıtlı olan kişilerin e-mail adresi, isimleri ve ilgili resimleri ile eşleşip tagger eklentisi sayesinde select elementi açtığınızda karşınıza isim ve bir icon görünmesini sağlıyor. Her kişiye kendi resminide ekleyerek kullanabilirsiniz.

Download Tagger

Demo Tagger