Skip to content
Permalink
Browse files

Autocomplete: Render items as text, not HTML. Fixes #5275 - suggestio…

…ns 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.
  • Loading branch information...
scottgonzalez committed Jul 19, 2010
1 parent 7deb873 commit 1f2cfb942f8ac5549b1fe3172501e3486415530e
Showing with 9 additions and 3 deletions.
  1. +6 −0 demos/autocomplete/combobox.html
  2. +2 −2 demos/autocomplete/search.php
  3. +1 −1 ui/jquery.ui.autocomplete.js
@@ -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>" )

This comment has been minimized.

Copy link
@erikrose

erikrose Jul 19, 2010

Perhaps we should use text() as below so people don't copy this and end up in trouble when the label is "<script>doMaliciousStuff()</script>"?

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Jul 19, 2010

Author Member

The combobox demo uses HTML to show highlighting, so we can't use .text().

This comment has been minimized.

Copy link
@erikrose

erikrose Jul 19, 2010

That's what I get for not reading the rest of the file. Never mind, and thanks for the awesome quick fix! :-D

.appendTo( ul );
};
$("<button>&nbsp;</button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
@@ -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",
@@ -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 );
},

0 comments on commit 1f2cfb9

Please sign in to comment.
You can’t perform that action at this time.