JSFiddle - React, Tailwind, and code Playground

by Lardpower

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.2/js/bootstrap.min.js"></script>
<script src="https://chelfisher.ru/bootstrap-typeahead.min.js"></script>
<form id="main">

  <input id="demo1" type="text" class="col-md-12 form-control" placeholder="Search cities..." autocomplete="off" data-test="100" />

  <input type="hidden" name="city" />

  <input type="submit" value="Submit form" />

</form>

JavaScript

$(document).ready(() => {

  $('#main').on('submit', (e) => {
    e.preventDefault();

    alert($(e.target).serialize());
  });

  $('#demo1').typeahead({
    ajax: { 
      url: '/cities/list?unique-id=100',
      triggerLength: 1 
    },

    source: [
      {id: 1, name: 'Toronto'},
      {id: 2, name: 'Montreal'},
      {id: 3, name: 'New York'},
      {id: 4, name: 'Buffalo'},
      {id: 5, name: 'Boston'},
      {id: 6, name: 'Columbus'},
      {id: 7, name: 'Dallas'},
      {id: 8, name: 'Vancouver'},
      {id: 9, name: 'Seattle'},
      {id: 10, name: 'Los Angeles'}
    ],
    onSelect: function displayResult(item, second, third) {
      const uniqueId = this.ajax.url.replace('/cities/list?unique-id=', '');
      console.log(uniqueId);

    }
  });

});