jQuery Typeahead Ajax 在 bootstrap 4 中不起作用

Question

如何通过 Ajax 调用设置 Typeahead 源。我尝试了下面的代码，但本地数组中的 undefined.Loading 似乎工作正常。只有 ajax 实现有问题。

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>

在一次 Ajax 调用中加载所有列表并使用 Typeahead 进行本地搜索。

jQuery Typeahead Ajax 在 bootstrap 4 中不起作用

jQuery Typeahead Ajax not working in bootstrap 4

php

jquery

ajax

typeahead.js

typeahead