Blog

JQuery Autocomplete labels escape HTML tags

Jonathon Horsman Nov 17 13 comments

We just upgraded JQuery UI to version 1.8.6 (from 1.8.2) and found some previously working Autocomplete code is now broken.

Specifically we had some cleverness which shows the matching text in the results in bold.

The source function of the autocomplete looks like this:

source: function(request, response) {
  var matcher = new RegExp(request.term, "i");
  $.ajax({
    url: "/suggest_contact",
    dataType: "jsonp",
    data: { search: request.term },
    success: function(data) {
      var results = $.map(data, function(item) {
        var contact = item.contact;
        return {
          label: contact.name.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
          value: contact.name,
          id: contact.id
        }
      });
      results.push({id: 0, label: "New contact: " + request.term, value: request.term});
      response(results);
    }
  })
}

So the returned JSON data label gets set with the contact name. Where the text matches the search for term we wrap in a <strong> tag.

Now it seems the <strong> tag gets escaped and appears in the search results:

JQuery Autocomplete showing the escaped HTML strong tag
JQuery UI now escapes the Autocomplete results

Sure enough the code which used to render the item has been updated to use the JQuery text() method, which escapes the HTML.

So to prevent that, I replace the /_renderItem/ method on autocomplete and use the JQuery html() method instead.

Just add this code to your Javascript somewhere and your HTML tags won’t be escaped anymore in Autocomplete:

/* this allows us to pass in HTML tags to autocomplete. Without this they get escaped */
$[ "ui" ][ "autocomplete" ].prototype["_renderItem"] = function( ul, item) {
return $( "<li></li>" ) 
  .data( "item.autocomplete", item )
  .append( $( "<a></a>" ).html( item.label ) )
  .appendTo( ul );
};

Comments //

car

car Mar 16

This is a well thought out post. Thanks!

game

game Mar 16

I read this article completely on the topic of the resemblance of most recent and earlier technologies, it's awesome article.

La reine des neiges telecharger le film

La reine des neiges telecharger le film Mar 23

Very quickly this website will be famous amid all blogging viewers, due to it's good articles

Jeanne

Jeanne Mar 25

Great weblog right here! Additionally your web site lots up fast!
What web host are you the usage of? Can I get your affiliate link for
your host? I want my web site loaded up as quickly as yours lol

cheat clash of clan

cheat clash of clan Mar 27

I really like your blog.. very nice colors & theme. Did you design this website yourself or did you hire
someone to do it for you? Plz reply as I'm looking to design my own blog and would like to find out
where u got this from. appreciate it

adomtravail

adomtravail Mar 31

Because the admin of this website is working, no question very soon it will be well-known,
due to its feature contents.

Colin

Colin Mar 31

Hello, every time i used to check website posts here
early in the dawn, as i enjoy to find out more and more.

アイフォン ケース ブランド

アイフォン ケース ブランド Apr 16

chanel3680.shop-proは携帯カバー シャネルの人気通販店です。
 携帯カバー シャネル最新情報やイベントを紹介する携帯カバー ブランド専門サイトです。
  
 シャネル iPhoneケースなど情報満載!iPhoneケース シャネルなど幅広く取り揃えています。
 アイホン5カバー シャネル:http://chanel3680.shop-pro.jp/
 携帯カバー ブランド:http://chanel3680.shop-pro.jp/
 シャネルアイホンカバー通販の新作は止まらなくて登場します!
 アイフォン ケース ブランド100%品質保障好評!
 お客様の欲しい携帯カバー ブランドの激安専門サイトです。シャネルアイホンカバーなら、chanel3680にお任せ!
 chanel3680は海外有名シャネル iPhoneケース限定シャネル アイフォンケース iPhoneケース シャネルをはじめ携帯カバー シャネル通販店です。
 2014春夏新作携帯カバー シャネル アイホン5カバー シャネル大好評販売中!
[url=http://chanel3680.shop-pro.jp/?mode=cate&cbid=1725842&csid=0]アイフォン ケース ブランド[/url]

house espresso machine

house espresso machine Apr 18

It is not my first time to visit this web page, i am visiting this web page dailly and
take good information from here everyday.

seo advice

seo advice May 30

Fantastic website. Lots of useful information here.

I am sending it to some friends ans alo sharing in delicious.

And obviously, thanks on your sweat!

raghu

raghu Jul 30

fdgfdgfdg

what you know about clash of clans android hack

what you know about clash of clans android hack Aug 01

In the racing game also winner is declared and he is rewarded out of that.
When you decided to play cricket, decide yourself that are you going to
become a batsman or bowler or an all rounder. Tendulkar
and his records - Tendulkar played cricket for over two decades.

Forrest

Forrest Aug 02

I was recommended this website by my cousin. I'm not sure whether this post is written by him
as nobody else know such detailed about my difficulty.

You are incredible! Thanks!

Post a comment

  1. optional

Recent Tweets

Blog: The monumental Myspace cock-up: http://bit.ly/emgRKV
Tweeted on Friday at 09:43

Awww railsapi, delete some logs: http://bit.ly/htBNDH
Tweeted on Wednesday at 16:15