jQuery добавляет HTML к результатам

Question

мой входной массив имеет:

results[num_row] = {
    'title': title,
    'url': url,
    'support_url': support_url,
    'description': description,
    'contacts': contacts
};

Я получаю результаты обратно:

function formatItem(item){
   var highlight = $.Autocompleter.defaults.highlight;
   var temp = '<span class="title">' + highlight(item.title, term)  + '</span>';
   temp += '<br />&nbsp;&nbsp;' + item.description;
   return temp;
} 

function prep(){
$("#searchbox").autocomplete(results,{
    width:500,
    scroll:false,
    formatItem: formatItem,
    highlight: false

}).result(function(event, item) {
    location.href = item.url;
});
}

Я хотел бы иметь возможность добавлять теги к возвращаемому объекту, чтобы я мог переопределить цвета с помощью css. Например, я хотел бы сделать что-то вроде:

formatItem: function(item) {
    var temp = '<span class="title">' + item.title + </span> + '<br />&nbsp;&nbsp;' + <span class="description"> + item.description + </span>;
    return temp;
}

Когда я пытаюсь добавить встроенные теги таким образом, он меняет критерий поиска ввода на наличие этого литерального тега. Поэтому мне нужно набрать <span class="title">Search String, чтобы искать вместо Search String.

Спасибо.

Answer 1

Ваша функция проходит через options.highlight впоследствии. Попробуйте указать функцию выделения, которая возвращает исходную строку:

$("#searchbox").autocomplete(results, {
    formatItem: function(item, foo, bar, term) {
        var highlight = $.Autocompleter.defaults.highlight;
        var temp = '<span class="title">' + highlight(item.title, term)  + '</span>';
        temp += '<br />&nbsp;&nbsp;' + item.description;

        return temp;
    },

    highlight: false
}).result(function(event, item) {
    location.href = item.url;
});

Убедитесь, что вы избегаете item.title, чтобы предотвратить атаки XSS!