Adding search result with Jquery

Question

Hi Folks,

iam trying to setup an little search-engine for my website. I want to add an div for each search result. In the moment i do the following :

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

But iam sure, there is an better way with jquery or ?

Answer 1

You could speed up your code if you append your results just once instead of appending part of it in each iteration:

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 is one of the slowest operations.

Also if you are planning to use data returned by selector only once there is no need to assign it to the variable, but to be honest that won't save you a lot of time.

Answer 2

First of all, I'd return [] instead of ["nothing"] for empty datasets. Then, I'd do something like this:

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

In other words, I'd have the HTML for no search results in the dom, inside a object with the id #no_search_results_message, instead of creating that HTML with javascript. Also doing what RaYell mentions - only calling append once.

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