JSFiddle - React, Tailwind, and code Playground

by Soundar Pandian

HTML

<div class="ui-widget" style="float: left;">
    <label for="from">From: </label>
    <input id="from">
</div>
    
<div class="ui-widget" style="float: right;">
    <label for="to">To: </label>
    <input id="to">
</div>

JavaScript

var fromCity = [
    "Aachara",
    "Aadsar",
    "Aahor",
    "Aamaran",
    "Aanjangaon",
    "Aavanam Kaikaati",
    "Achampet"
];
var toCity = [
     "Aachara",
    "Aadsar",
    "Aahor",
    "Aamaran",
    "Aanjangaon",
    "Aavanam Kaikaati",
    "Achampet"
];

var disable=false;

$( "#from" ).autocomplete({
    source: fromCity,
    select: function(event, ui) { 
        $( "#from" ).blur();        
        $( "#to" ).focus();
    }
});   
$( "#to" ).autocomplete({
    source: toCity
});