jQuery ajouter html aux résultats

Question

mon tableau d'entrée a:

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

-je obtenir les résultats de retour:

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

Je voudrais être en mesure d'ajouter des balises à ce qui est de retour si que je peux remplacer les couleurs en utilisant css. Par exemple, je voudrais faire quelque chose comme:

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

Lorsque je tente d'ajouter les balises en ligne comme ça, ça change la recherche d'entrée critera d'avoir cette étiquette littérale. Donc, je dois réellement taper <span class="title">Search String afin de rechercher au lieu de Search String.

Merci.

Answer 1

Votre fonction est ensuite exécutée par options.highlight. Essayez spécifiant une fonction de surbrillance qui retourne la chaîne source:

$("#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; 
}); 

Assurez-vous échapper item.title pour prévenir les attaques XSS!