Video – Play framework ile autocomplete kullanımı

Gönderen tarih 20 Mayıs 2011 Yorum Yaz (6) Yorumlara Git

Play framework ile jquery-ui autocomplete kullanımı konusunda bir video hazırladım. İyi seyirler!



Bir player olarak canavar
  • Fafaynk

    Js içerisinde belirlediğimiz geri dönüş değerlerinden label, value çiftine ek olarak birde id alanının json cevabı ile geldiğini görüyoruz, bunun sebebi nedir? Nasıl engelleyebiliriz?

    Teşekkürler.

    • canavar

      Bunu engellemek için 3 farklı yöntem önerebilirim.

      1. Veritabanından kullanıcıları çektiğimiz satırı aşağıdaki gibi değiştiririz.

      1
      List users = User.find("select username, fullName from User where upper(fullName) like upper(?)",term + "%").fetch();

      Javascript kodunda dönen cevabı işleyen kısmı da aşağıdaki şekilde güncelleriz.

      1
      2
      3
      4
      5
      6
      7
      8
      success: function( data ) {
                      response( $.map( data, function( item ) {
                          return {
                              label: item[1],
                              value: item[0]
                          }
                      }));
                  }

      2. Veritabanından kullanıcıları çektiğimiz satırı aşağıdaki gibi değiştiririz.

      1
      List users = User.find("select new User(username, fullName) from User where upper(fullName) like upper(?)", term + "%").fetch();

      3. JSON formatına dönüştürme işlemini özelliştirerek id alanını hariç tutarız.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      public static void users(String term) {
              List users = User.find("upper(fullName) like upper(?)", term + "%").fetch();
              String json = new GsonBuilder().setExclusionStrategies(new ExclusionStrategy() {
                 
                  @Override
                  public boolean shouldSkipField(FieldAttributes arg0) {
                      if(arg0.getName().equals("id"))
                          return true;
                      return false;
                  }
                 
                  @Override
                  public boolean shouldSkipClass(Class< ?> arg0) {
                      return false;
                  }
              }).create().toJson(users);
              renderJSON(json);
          }
  • Fafaynk

    Teşekkürler.

  • Umut

    arama sonucunda gelen listede seçilen elemanın id’sini daha önce tanımlamış olduğum currentId değişkenine almak istiyorum.

    dataType: “json”,
    data: {
    term: request.term
    },
    success: function(data) {
    if(data == null || data == “”)
    document.getElementById(‘phone’).value = “”;
    else{
    response ($.map(data, function(item) {
    currentId = item.id;
    return {
    label:item.modelName,
    value:item.modelName
    }
    }));

    ancak bu yapı her zaman dönen listedeki son elemanın id’sini currentId’ye atıyor. Ben listeden seçilen elemanın id’sini bu değişkende saklamak istiyorum. Bununla ilgili düzeltmem gereken yer sizce neresi?

    Teşekkürler.

    • Umut

      sorunu bu satırları ekleyerek çözdüm. teşekkürler.

      $( “#phone” ).bind( “autocompleteselect”, function(event, ui) {
      currentMobileID = ui.item.id;
      });

      • Anonim

        select property’sini kullanarak şöyle de yapabilirdin:

        var $currentMobileID;
        $(this).autocomplete({
        source: function(request, response) {
        ….
        },
        minLength: 3,
        select: function(event, ui) {
        $currentMobileID = ui.item.id;
        }
        });