jQuery Typeahead Ajax not working in bootstrap 4

Question

How can i set the Typeahead source from an Ajax call. I tried below code but it seems undefined.Loading from local array is working fine. Only ajax implementation has the problem.

Ajax:

  $('#account-drp .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  }, {
    name: 'account',
    source: function(query, result)
      {
       $.ajax({
        url:"/review/account_lookup_no_db.php",
        method:"POST",
        data:{query:query},
        dataType:"json"
       })
      }
  });

account_lookup.php:

<?php
$accounts = array('Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming','Highland');

if (isset($_REQUEST['query'])) {
    $query = $_REQUEST['query'];

    $matchstr = "/".$query."/";
    $matches = preg_grep($matchstr,$accounts);

    $data = array();
    foreach($matches as $match) {
        $data[] = $match;
    }
    //print_r($data);

    //RETURN JSON ARRAY
    header('Content-Type: application/json;charset=utf-8');
    echo json_encode ($data);
    exit();
}
?>

Answer 1

<script>
    (function ($) {
      'use strict';
      var substringMatcher = function (strs) {
        return function findMatches(q, cb) {
          var matches, substringRegex;

          // an array that will be populated with substring matches
          matches = [];

          // regex used to determine if a string contains the substring `q`
          var substrRegex = new RegExp(q, 'i');

          // iterate through the pool of strings and for any string that
          // contains the substring `q`, add it to the `matches` array
          for (var i = 0; i < strs.length; i++) {
            if (substrRegex.test(strs[i])) {
              matches.push(strs[i]);
            }
          }

          cb(matches);
        };
      };


      $.ajaxSetup({
        async: false
      });
      // Make async false first
      var jsonDataSt = (function () {
        var result;
        $.getJSON('http://localhost/demo/account_lookup_no_db.php?query=', {}, function (
          data) {
          result = data;
        });
        return result;
      })();

      var jsonDataSt = JSON.parse(JSON.stringify(jsonDataSt));

      $('#account-drp .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
      }, {
        name: 'account',
        source: substringMatcher(jsonDataSt)
      });


    })(jQuery);
  </script>

Load all list in one Ajax call and do the local search with Typeahead.