SORU
17 Ocak 2011, PAZARTESİ


JQuery hakkında hiçbir sonuç tespit UI otomatik tamamlama

Onlara beni işaret etmeden önce, evet, bu konu üzerinde yarım düzine mesajları inceledim, ama yine de bu çalışmıyor neden olarak engellenmiş durumdayım.

Amacım otomatik tamamlama 0 sonuçlar ne zaman tespit etmektir. İşte kod:

 $.ajax({
   url:'sample_list.foo2',
   type: 'get',
   success: function(data, textStatus, XMLHttpRequest) {
      var suggestions=data.split(",");

  $("#entitySearch").autocomplete({ 
    source: suggestions,
    minLength: 3,
    select: function(e, ui) {  
     entityAdd(ui.item.value);
     },
    open: function(e, ui) { 
     console.log($(".ui-autocomplete li").size());
     },
    search: function(e,ui) {
     console.log("search returned: "   $(".ui-autocomplete li").size());

    },
    close: function(e,ui) {  
     console.log("on close"    $(".ui-autocomplete li").size());    
     $("#entitySearch").val("");
    }
   }); 

  $("#entitySearch").autocomplete("result", function(event, data) {

   if (!data) { alert('nothing found!'); }

  })
 }
}); 

Arama iyi kendisi çalışır, sonuçlar bir sorun olmadan görünmesini sağlayabilirim. Anladığım kadarıyla, bengerekirotomatik tamamlama ile sonuçlara müdahale edebilmek ("") sonuç işleyicisi. Bu durumda, hiç tetikler. (Genel bir uyarı ya da konsol.sonuç sayısını asla harekete referansı olmayan günlük). Açık olay işleyicisi sonuçları doğru sayısını gösterir bulgular vardır (zaman), ve arama ve yakın olay işleyicileri hep bir adım geride olduğu sonucu boyutuna sahip.

Çok belirgin bir şey eksik ve burada göze batan gibiyim ama ben öyle görmüyorum.

CEVAP
18 Ocak 2011, Salı


jqueryuı 1.9

jqueryuı 1.9 kaldıraç eğer hiçbir sonuç verdiğini olsaydı tespit edebiliriz response olay ile otomatik tamamlama widget kutsadı:

Aramanın ardından harekete menü gösterilir önce tamamlar. Özel kaynak seçenek geri arama gereği olmayan yerlerde öneri veriler, yerel düzenleme için yararlı. Bu olay her zaman bir arama menüsünü sonuç yok veya otomatik tamamlama devre dışı olduğundan gösterilecektir bile tamamlar, zaman tetiklenir.

Yani, bunu unutmayın, jqueryuı 1,8 yapmak zorundaydık hack ile değiştirilir:

$(function() {
    $("input").autocomplete({
        source: /* */,
        response: function(event, ui) {
            // ui.content is the array that's about to be sent to the response callback.
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
            } else {
                $("#empty-message").empty();
            }
        }
    });
});​

Örnek:http://jsfiddle.net/andrewwhitaker/x5q6Q/

< / ^ hr .

jqueryuı 1.8

JQueryUİ API ile bunu yapmak için basit bir yolu, ancak bulamadım, kendi autocomplete._response işlevini değiştirmek ve varsayılan jqueryuı işlevini çağırın (prototype otomatik tamamlama nesne uzatmak) için güncellendi:

var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
    __response.apply(this, [content]);
    this.element.trigger("autocompletesearchcomplete", [content]);
};

Ve bağlama olayı autocompletesearchcomplete olay işleyicisi (içindekiler arama sonucu, bir dizi):

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

Burada neler oluyor otomatik tamamlama response fonksiyon bir değişkene (__response) tasarruf ve daha sonra apply tekrar aramak için kullanıyorsun. Varsayılan yöntem arıyorsun beri kötü etkileri bu yöntem, herhangi bir hayal bile edemiyorum. Nesnenin prototip değiştirme olduğumuza göre, bu tüm otomatik tamamlama widget için çalışacak.

Burada çalışan bir örnek: 32**

Benim örnek veri kaynağı olarak yerel bir dizi kullanır, ama bu konuda sanmıyorum.

< / ^ hr .

Güncelleme:Ayrıca kendi widget yeni işlevi, işlevi otomatik tamamlama: varsayılan uzanan sarmak olabilir

$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {

  _response: function(contents){
      $.ui.autocomplete.prototype._response.apply(this, arguments);
      $(this.element).trigger("autocompletesearchcomplete", [contents]);
  }
}));

.autocomplete({...}); telefon değiştirme:

$("input").customautocomplete({..});

Ve sonra da özel bağlama autocompletesearchcomplete etkinlik sonraki:

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

Buna bir örnek olarak görüyor: 33**

< / ^ hr .

Bu soru/cevap biraz dikkat kaçtığından beri, başka bir yol ile bu cevap bunu gerçekleştirmek için güncellemek istedim. Bu yöntem sadece sahip olduğunuz zaman kullanışlıdırbirsayfasında otomatik tamamlama widget. Bunu yapmanın bu şekilde uzaktan veya yerel bir kaynak kullanan bir otomatik tamamlama widget uygulanabilir:

var src = [...];

$("#auto").autocomplete({
    source: function (request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);

        if (!results.length) {
            $("#no-results").text("No results found!");
        } else {
            $("#no-results").empty();
        }

        response(results);
    }
});

Özel mantık hiçbir sonuç algılandığında yürütecek nokta if içinde.

Örnek:http://jsfiddle.net/qz29K/

Eğer uzak bir veri kaynağı kullanıyorsanız, bu gibi bir şey dediler

$("#auto").autocomplete({
    source: "my_remote_src"
});

Sonra AJAX Kendin Ara ve 0 sonuçlar geri algılayabilir yapmak için kodunuzu değiştirmeniz gerekir:

$("#auto").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "my_remote_src", 
            data: request,
            success: function (data) {
                response(data);
                if (data.length === 0) {
                    // Do logic for empty result.
                }
            },
            error: function () {
                response([]);
            }
        });
    }
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Amena

    Amena

    15 Kasım 2006
  • Jejoab

    Jejoab

    4 NİSAN 2008
  • MikeyMacintosh

    MikeyM

    28 Aralık 2009