Ajout d'un résultat de recherche avec Jquery

Question

J'essaie d'installer un petit moteur de recherche pour mon site Web. Je veux ajouter un div pour chaque résultat de recherche. Au moment où je fais ce qui suit:

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>'); 
       }); 
      } 

Mais je suis sûr, il y a un meilleur moyen avec jquery ou?

Answer 1

Tout d'abord, je retournerais [] au lieu de ["nothing"] pour les jeux de données vides. Ensuite, je ferais quelque chose comme ceci:

// -- 
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(); 
    } 
} 

En d'autres termes, il faudrait que je le code HTML pour aucun résultat de recherche dans le Royaume, à l'intérieur d'un objet avec l'ID #no_search_results_message, au lieu de créer que HTML avec javascript . Fais aussi ce que RaYell mentionne - n'appelant qu'une seule fois append.

Answer 2

Vous pouvez accélérer votre code si vous ajoutez vos résultats juste une fois au lieu d'ajouter une partie de celui-ci à chaque itération:

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('')); 
    } 
} 

Changing DOM est l'une des opérations les plus lentes.

Si vous prévoyez d'utiliser les données renvoyées par le sélecteur uniquement une fois que vous n'avez pas besoin de les affecter à la variable, vous pouvez économiser beaucoup de temps.

Answer 3

success:function(data) 
{ 
    if (data[0] == 'nothing') 
    { 
     $('#search-result').append('<h3>' + LANG.nothing + '</h3>'); 
     $('#ajax-load').empty(); 
     return false; 
    } 
    else 
    { 
     var entry = '' 
     $.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 + "/>"; 
     }); 
     $('#search-result').append("<div class='span-6'>" + entry + '</div>'); 
    } 
}