JSFiddle - React, Tailwind, and code Playground

by ray9209

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<input type="text" id="input1" name="origin" placeholder="From" autofocus>

JavaScript

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":"United States"},
{"IATA":"JFK","city":"New York","airp":"John F. Kennedy Intl.","country":"United states"}];

$("#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);
    }
});