jQuery Typeahead Ajax在bootstrap 4中不起作用

问题描述 投票:1回答:1

如何从Ajax调用中设置Typeahead源。我试过下面的代码,但它似乎未定义。从本地数组加载工作正常。只有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();
}
?>
php jquery ajax typeahead.js typeahead
1个回答
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执行本地搜索。

© www.soinside.com 2019 - 2024. All rights reserved.