簡體   English   中英

jQuery Typeahead Ajax 在引導程序 4 中不起作用

[英]jQuery Typeahead Ajax not working in bootstrap 4

如何從 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();
}
?>
<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 進行本地搜索。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM