Question

我无法在我的网站上工作，这是我尝试过的。

我的HTML和代码

    <html>
<head>
    <title>typeahead</title>

     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
</head>
<body>


<input id="typeahead" type="text" data-provide="typeahead" autocomplete="off">



<script type="text/javascript">
$(document).ready(function() {
$('#typeahead').typeahead({
  source: function (query, process) {
    $.ajax({
      url: 'data.php',
      type: 'get',
      dataType: 'JSON',
      async: true,
      data: 'query=' + query,
      success: function(data) {
        console.log(data);
        process(data);
      }
    });
  }
});
});
</script>

</body>
</html>

当我在浏览器中查询data.php时，我得到以下内容

http://localhost/data.php?query=a

输出

["admin","admin2"]

然而，我不确定为什么它不起作用，后端工作，我多次检查我的代码，我不知道我错过了什么。

非常感谢您的帮助。

Answer 1

$.ajax({
  url: 'data.php', // Just try url:'data.php?query=a'
  type: 'get',
  dataType: 'JSON',
  async: true,
  data: {'query' : query}, // changed
  success: function(data) {
     console.log(data);
     process(data);
   }
});

Answer 2

你可以用Bootstrap 2.1.0编写这样的ajax调用，直到2.3.2：

$(document).ready(function(){
  $('#typeahead').typeahead({
            source: function (typeahead, query) {
                return $.get('data.php', { 'query': a }, function (data) {
                    return typeahead.process(data);
                });
            }
        });

});

使用Bootstrap 3.0类型不再捆绑它，所以你可以使用Ajax Type-ahead

它非常易于使用：

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

Answer 3

通常，typeahead也使用handlebar.js，所以我在这里包含了。我更新了您的代码以匹配远程示例here（虽然我没有真正测试代码）。希望这会让你指出正确的方向。

<html>
<head>
        <title>typeahead</title>

         <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
         <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
</head>
<body>

<input id="typeahead" type="text" data-provide="typeahead" autocomplete="off">


<script type="text/javascript">
    $(document).ready(function() {
        var mySearch = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: 'data.php',
            remote: 'data.php?query=' + query
        });

        mySearch.initialize();

        $('#typeahead').typeahead(null, {
            name: 'best-pictures',
            displayKey: 'value',
            source: mySearch.ttAdapter()
        });
    });
</script>

</body>
</html>

使用ajax的bootstrap typeahead

3 个答案: