Добавление результата поиска с помощью JQuery

Question

iam пытается настроить небольшую поисковую систему для моего сайта. Я хочу добавить div для каждого результата поиска. В настоящий момент я делаю следующее:

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

Но я уверен, что есть лучший способ с jquery или?

Answer 1

Прежде всего, я бы вернул [] вместо ["nothing"] для пустых наборов данных. Тогда, я бы что-то вроде этого:

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

Другими словами, я бы иметь HTML для каких-либо результатов поиска в DOM, внутри объекта с идентификатором #no_search_results_message, вместо того чтобы создавать что HTML с JavaScript , Также делает то, что упоминает Райелл, только один раз звонит append.

Answer 2

Вы можете ускорить ваш код, если вы добавите свои результаты только один раз вместо добавления части в каждой итерации:

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 является одним из самых медленных операций.

Также, если вы планируете использовать данные, возвращаемые селектором, только один раз, когда нет необходимости назначать его переменной, но, честно говоря, это не сэкономит вам много времени.

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