JQuery ile arama sonucunu ekleme

2 Cevap php

iam benim web sitesi için kurulum için biraz arama motoru çalışıyor. Ben her arama sonucu için bir div eklemek istiyorum. An i aşağıdakileri yapın:

success: function(data) {

            if (data[0] == 'nothing') {
                result = $('#search-result');
                result.append('<h3>' +  LANG.nothing + '</h3>');
                $('#ajax-load').empty();
                return false;
            } else {
                jQuery.each(data, function(i, val) {
                    entry = "<h3><a href='" + val.link + "'>" +
                    val.title + '</a></h3>' + '<p>' +
                    val.description + '</p>' + '<p>' +
                    val.tutorials + '</p>' + "<img src='" +
                    val.screenshot + "/>";
                    result = $('#search-result');

                    result.append("<div class='span-6'>" + entry + '</div>');
                });
            }

Ama emin olun iam, jquery veya bir daha iyi bir yolu var mı?

2 Cevap

Her şeyden önce, ben [] dönecekti yerine ["nothing"] boş veri setleri için. Sonra, ben böyle bir şey yapmak istiyorum:

// --
success: function(data) {
  if (data.length == 0) {
    $("#no_search_results_message").show();
    $("#search_results").hide();
  } else {
    var html = '';
    $.each(data, function(i, d) {
      html += '<h3><a href="' + d.link + '">' + d.title + '</a></h3>'
        + '<p>' + d.description + '</p>'
        + '<p>' + d.tutorials + '</p>'
        + '<img src="' + d.screenshot + '" />';
    });
    $("#search_results").append(html).show();
    $("#no_search_results_message").hide();
  }
}

Diğer bir deyişle, ben yerine javascript ile bu HTML oluşturma, #no_search_results_message kimliği ile bir nesnenin içinde, dom hiçbir arama sonuçları için HTML olurdu. Ayrıca RaYell bahseder ne yapıyor - sadece append kez çağırıyor.

Yerine her tekrarında bir kısmını ekleyerek sadece bir kez sonuçlarınızı append eğer kodunuzu hızlandırmak olabilir:

success: function(data) {
    if (data[0] == 'nothing') {
        $('#search-result').append('<h3>' +  LANG.nothing + '</h3>');
        $('#ajax-load').empty();
        return false;
    } else {
        var items = [];
        jQuery.each(data, function(i, val) {
            var entry = "<h3><a href='" + val.link + "'>" +
            val.title + '</a></h3>' + '<p>' +
            val.description + '</p>' + '<p>' +
            val.tutorials + '</p>' + "<img src='" +
            val.screenshot + "/>";

            items.push('<div class="span-6">' + entry + '</div>'
        });

        $('#search-result').append(items.join(''));
    }
}

DOM değiştirme yavaş operasyonlarının biridir.

Ayrıca sadece bir kez değişkene atamak için gerek yoktur seçici tarafından döndürülen verileri kullanmak için, ama size çok zaman tasarruf olmaz ki dürüst olmak planlıyorsanız.

etiketler