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

Question

Я пытаюсь настроить небольшую поисковую систему для моего сайта. Я хочу добавить 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>');
    }
}