jQuery Autocomplete - how to make matching text bold

Question

I'm using jQuery's autocomplete to display suggestions to the user for a text input field and I'm having a hard time making the matching text in the suggestion list bold. For example, if a user starts to type in "balt", the text "balt" in each of the autocomplete suggestions displayed should be bolded like this:

"Baltimore, USA - Baltimore Intl. (BWI)"

(similar to what Kayak.com does on their search form).

JS:

var airportList = [
{"IATA":"BWI","city":"Baltimore","airp":"Baltimore Intl.","country":"USA"},
{"IATA":"SEA","city":"Seattle","airp":"Seattle Tacoma Intl.","country":"USA"},
{"IATA":"LAX","city":"Los Angeles","airp":"Los Angeles Intl.","country":"USA"},
{"IATA":"JFK","city":"New York","airp":"John F. Kennedy Intl.","country":"USA"}];

$("#input1").autocomplete({
    minLength: 3,
    source: function(request, response){

    var searchTerm = request.term.toLowerCase();
    var ret = [];
    var ph;
    $.each(airportList, function(i, airport){
        if (airport.city.toLowerCase().indexOf(searchTerm) === 0 || airport.IATA.toLowerCase().indexOf(searchTerm) !== -1 || airport.country.toLowerCase().indexOf(searchTerm) === 0 || airport.airp.toLowerCase().indexOf(searchTerm) === 0) {
        ph = airport.city + ', ' + airport.country + ' - ' + airport.airp + ' (' + airport.IATA + ')';

        // ph is each suggestion that will appear in the suggestions list, i need to 
        // make the substring in ph that matches the searchTerm appear bold; I've tried
        // replacing the substring with the same substring with <strong> tags around it
        // and the .bold() function, neither worked.

        ret.push(ph);
        }

        });

        response(ret);
    }
});

fiddle: http://jsfiddle.net/ray9209/v9o71L11/2/

Here, look at this: http://bartaz.github.io/sandbox.js/jquery.highlight.html — Control Freak, Oct 04 '14 at 04:45
var ph is a string, not a jquery object so the highlight plugin won't work. — ray9209, Oct 04 '14 at 04:57
Why would you put html in your json object, when you can render the jquery object (selector) as you display it — Control Freak, Oct 04 '14 at 05:02
@AmitJoki: here's the fiddle: http://jsfiddle.net/ray9209/v9o71L11/1/ if it helps (the autocomplete suggestions actually aren't working for some reason, they're working on my server). — ray9209, Oct 04 '14 at 05:05
You need to add jQuery UI to your external resources or your fiddle won't work — Control Freak, Oct 04 '14 at 05:11
Thanks @ZeeTee, fiddle works now: http://jsfiddle.net/ray9209/v9o71L11/2/ — ray9209, Oct 04 '14 at 05:34
Possible duplicate of [How can I custom-format the Autocomplete plug-in results?](https://stackoverflow.com/questions/2435964/how-can-i-custom-format-the-autocomplete-plug-in-results) — Prateek, Nov 18 '18 at 17:06

score 1 · Accepted Answer · answered Oct 04 '14 at 07:15

To achieve this you should use the _renderItem function, which basically renders the items in the result list. In this function you would replace the searched string with a new string surrounded by tag.

var airportList = [
{"IATA":"BWI","city":"Baltimore","airp":"Baltimore Intl.","country":"USA"},
{"IATA":"SEA","city":"Seattle","airp":"Seattle Tacoma Intl.","country":"USA"},
{"IATA":"LAX","city":"Los Angeles","airp":"Los Angeles Intl.","country":"USA"},
{"IATA":"JFK","city":"New York","airp":"John F. Kennedy Intl.","country":"USA"}];

$("#input1").autocomplete({
minLength: 3,
source: function(request, response){

var searchTerm = request.term.toLowerCase();
var ret = [];
var ph;
$.each(airportList, function(i, airport){
    if (airport.city.toLowerCase().indexOf(searchTerm) === 0 ||   airport.IATA.toLowerCase().indexOf(searchTerm) !== -1 || airport.country.toLowerCase().indexOf(searchTerm) === 0 || airport.airp.toLowerCase().indexOf(searchTerm) === 0) {
    ph = airport.city + ', ' + airport.country + ' - ' + airport.airp + ' (' + airport.IATA + ')';

    // ph is each suggestion that will appear in the suggestions list, i need to 
    // make the substring in ph that matches the searchTerm appear bold; I've tried
    // replacing the substring with the same substring with <strong> tags around it
    // and the .bold() function, neither worked.

    ret.push(ph);
    }

    });

    response(ret);
}
}).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li>" )
    .attr( "data-value", item.value )
    .append( $( "<a>" ).html( item.label.replace(new RegExp(this.term, 'gi'),"<b>$&</b>") ) )
    .appendTo( ul );
};

score 0 · Answer 2 · answered Oct 04 '14 at 05:17

The problem you're having is you're initializing your autocomplete with a static source and expecting to show different data each time you search.

Instead, put your highlighting process in the response() event to capture the returned data after each search before it renders, like so:

,response: function( event, ui ) {
   //render through the ui object here to update the highlighting on the results.
   if(ui.length>0){
     ui[0].label = "highlighted text";
   }
}

jQuery Autocomplete - how to make matching text bold

2 Answers2