From: Scott González <scott.gonzalez@gmail.com>
Date: Mon, 19 Jul 2010 19:45:30 +0000 (-0400)
Subject: Autocomplete: Render items as text, not HTML. Fixes #5275 - suggestions are not html... 
X-Git-Tag: 1.8.3~38^2~1
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=1f2cfb942f8ac5549b1fe3172501e3486415530e;p=jquery-ui.git

Autocomplete: Render items as text, not HTML. Fixes #5275 - suggestions are not html-encoded.

As noted in the ticket, it's probably better to default to unstyled items to prevent problems. Users can still implement their own rendering method as shown in the custom data and display demo.
---

diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html
index 10d165392..4cc98d8f9 100644
--- a/demos/autocomplete/combobox.html
+++ b/demos/autocomplete/combobox.html
@@ -54,6 +54,12 @@
 						minLength: 0
 					})
 					.addClass("ui-widget ui-widget-content ui-corner-left");
+				input.data("autocomplete")._renderItem = function( ul, item) {
+					return $( "<li></li>" )
+						.data( "item.autocomplete", item )
+						.append( "<a>" + item.label + "</a>" )
+						.appendTo( ul );
+				};
 				$("<button>&nbsp;</button>")
 				.attr("tabIndex", -1)
 				.attr("title", "Show All Items")
diff --git a/demos/autocomplete/search.php b/demos/autocomplete/search.php
index 01206489a..8fa9d28f8 100644
--- a/demos/autocomplete/search.php
+++ b/demos/autocomplete/search.php
@@ -3,8 +3,8 @@
 $q = strtolower($_GET["term"]);
 if (!$q) return;
 $items = array(
-"Great <em>Bittern</em>"=>"Botaurus stellaris",
-"Little <em>Grebe</em>"=>"Tachybaptus ruficollis",
+"Great Bittern"=>"Botaurus stellaris",
+"Little Grebe"=>"Tachybaptus ruficollis",
 "Black-necked Grebe"=>"Podiceps nigricollis",
 "Little Bittern"=>"Ixobrychus minutus",
 "Black-crowned Night Heron"=>"Nycticorax nycticorax",
diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
index c25a8884f..27bfe941c 100644
--- a/ui/jquery.ui.autocomplete.js
+++ b/ui/jquery.ui.autocomplete.js
@@ -304,7 +304,7 @@ $.widget( "ui.autocomplete", {
 	_renderItem: function( ul, item) {
 		return $( "<li></li>" )
 			.data( "item.autocomplete", item )
-			.append( "<a>" + item.label + "</a>" )
+			.append( $( "<a></a>" ).text( item.label ) )
 			.appendTo( ul );
 	},