jQuery UI - Autocomplete - Custom style?

Question

I'm using the following code and it's working, getting values back etc, but the  and  tags show up as text rather than get rendered. I'd like the item.id and item.label to be on different lines, if possible the item.id bold:

 $( "#predictSearch" ).autocomplete({
 source: function( request, response ) {
  $.ajax({
   url: "index.pl",
   dataType: "json",
   data: {
    term: request.term
   },
   success: function( data ) {
    response( $.map( data.items, function( item ) {
     return {
      label: '<B>' + item.id + '</B><br>' + item.label,
      value: item.id
     }
    }));
   }
  });
 },
 minLength: 2
});

 tag is depricated use  instead and   is better — Val
– Val, Commented May 13, 2011 at 12:55
instead of br use "\r\n" which is for new line but use double quotes not single quotes lol just incase ... — Val
– Val, Commented May 13, 2011 at 12:58
@Jatin yes if you look at the label: line I'm returning the id and label, I want one to be below the other on screen, so I try to add a tag and it doesn't get rendered. — Raoul
– Raoul, Commented May 13, 2011 at 12:59
@Val tag is not deprecated - it's purpose is just redefined to "an element that represents a span of text to be stylistically offset from the normal prose without conveying any extra importance." — easwee
– easwee, Commented May 13, 2011 at 13:25

jk. · Accepted Answer · 2011-08-22 14:00:12Z

8

It seems like you have some extra code (ajax call) for the autocomplete that it may not need. But, you can just swap out the special characters that jquery puts in to escape the html in the 'open' event of the autocomplete.

$("#autocomplete_field").autocomplete({
source: "autocomplete.php",
minLength: 2,
open: function(event, ui){
       $("ul.ui-autocomplete li a").each(function(){
        var htmlString = $(this).html().replace(/&lt;/g, '<');
        htmlString = htmlString.replace(/&gt;/g, '>');
        $(this).html(htmlString);
        });
     }
});

Full example http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/.

And, if you are using perl in the autcomplete, http://www.jensbits.com/2011/05/09/jquery-ui-autocomplete-widget-with-perl-and-mysql/ is an example for that.

edited Aug 22, 2011 at 14:00

answered May 13, 2011 at 13:08

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Raoul Over a year ago

Thank you Jen, this makes a lot of sense.

iMatoria Over a year ago

I am not sure, but i think this must be having performance issue. Open function shall be called each time user function inside the textbox and start search. Instead, _renderItem function could be used. Otherwise, its nice solution.

Raoul Over a year ago

Regarding the perl example rather than print "Content-type: text/html \n\n"; I tend to print $query->header();, and use DBI place holders for SQL injection prevention. Thanks again

jk. Over a year ago

@Raoul Thanks for the tip on the DBI placeholders. I updated my code.

jk. Over a year ago

@iMatoria Doesn't renderItem fire every time the user starts a search as well. I am not sure myself and will look into it.

iMatoria · Accepted Answer · 2011-05-13 13:07:40Z

Instead of Success event, use _renderItem event.

Live implementation at Vroom. Type airport, you shall notice an image at the left.

NOTE: _renderItem below has some complex calculation. Don't go by that, just utilize the idea.

$("#myInput")
        .autocomplete({
            minLength: 0,
            delay: 10,
            source: function (req, responseFn) {
                //Your ajax call here returning only responseFn Array having item.id and item.id
            },
            select: function (event, ui) {
                //action upon selecting an item
                return false;
            }
        })
    .data("autocomplete")
        ._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><span class='airoplane'>" + (item[0] + (item[2] == "" ? "" : ", " + item[2]) + (item[1] == "" ? "" : " (" + item[1] + ")")).replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term).replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span class='highlight'>$1</span>") + "</span></a>")
                .appendTo(ul);
        };

Corey Adler · Accepted Answer · 2012-12-19 16:30:23Z

0

We solved this problem by adding the following code at the end of the function:

$("ul.ui-autocomplete li a").each(function(){
   var htmlString = $(this).html().replace(/&lt;/g, '<');
   htmlString = htmlString.replace(/&gt;/g, '>');
   $(this).html(htmlString);
});

Here the event open callback function is not triggered.

edited Dec 19, 2012 at 16:30

Corey Adler

16.2k18 gold badges70 silver badges80 bronze badges

answered Dec 19, 2012 at 16:08

Ramón

1051 silver badge6 bronze badges

Comments

SemanticZen · Accepted Answer · 2013-04-15 01:21:49Z

0

Based on iMatoria's answer this is how I did it.

var jAuto = $('#purchaser-autocomplete input:text');

jAuto.autocomplete({
        source: URL
        minLength: 2,
        select: function (event, ui) {
            //Do Stuff
        }
    });

jAuto.data("autocomplete")._renderItem = function (ul, item) {
    var cssClass = "";
    if (item.id.substring(0,1) === 'S') { cssClass = " class='item-staff'"; }

    return $("<li" + cssClass + "></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
}

jAuto.focus();

answered Apr 15, 2013 at 1:21

SemanticZen

1,1511 gold badge14 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery UI - Autocomplete - Custom style?

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related