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" data-should-have-th="1" type="text"  data-id="test_id" class="col-md-12 form-control" placeholder="Search cities..." autocomplete="off" data-test="100" />

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

</form>

JavaScript

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

  $('[data-should-have-th="1"]').each((i, el) => {

    const alreadyHasTh = $(this).data('has-typeahead');

    if (!alreadyHasTh){
      const dataId = $(el).attr('id');
      $(el).typeahead({
        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) {
          console.log(dataId)
        }
      });

      $(this).data('has-typeahead', 1);

    }
  });


});