JSFiddle - React, Tailwind, and code Playground

by chrisk

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<div class="demo">
    <h1>Select your from and to stations</h1>
    <label for="searchFrom">From: </label>
    <input id="searchFrom" />
    <br />
    <label for="searchTo">To: </label>
    <input id="searchTo" />
    
</div>

CSS

.ui-autocomplete-category {
         font-weight: bold;
         padding: .2em .4em;
         margin: .8em 0 .2em;
         line-height: 1.5;
     }

JavaScript

$.widget( "custom.catcomplete", $.ui.autocomplete, {
         _renderMenu: function( ul, items ) {
             var self = this,
                 currentCategory = "";
             $.each( items, function( index, item ) {
                 if ( item.category != currentCategory ) {
                     ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                     currentCategory = item.category;
                 }
                 self._renderItem( ul, item );
             });
         }
     });

    $(function() {
        var data1 = [
            { label: "Ashford International", category: "Eurostar Stations" },
            { label: "Ebbsfleet International", category: "Eurostar Stations" },
            { label: "London St Pancras International", category: "Eurostar Stations" },
            { label: "Cardiff", category: "UK Stations" },
            { label: "Edinburgh Waverley", category: "UK Stations" },
            { label: "Norwich", category: "UK Stations" },
            { label: "Southampton Central", category: "UK Stations" },
            { label: "York", category: "UK Stations" }
        ];

        var data2 = [
            { label: "Paris Gare du Nord", category: "France" },
            { label: "Lille", category: "France" },
            { label: "Calais - Frethun", category: "France" },
            { label: "Disneyland Resort Paris", category: "France" },
            { label: "Avignin", category: "France" },
            { label: "Brussels", category: "Belgium" },
            { label: "Brussels – All Belgium stations", category: "Belgium" },
            { label: "Amsterdam – All Dutch stations", category: "The Netherlands" }
        ];

        
         $( "#searchFrom" ).catcomplete({
             delay: 0,
             source: data1
         });

         $( "#searchTo" ).catcomplete({
             delay: 0,
             source: data2
         });

    
    });