Question

我有以下index.html代码。它不是在调用search.php文件。

<html>
  <head>
    <title>Ajax Search Box using PHP and MySQL</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script>
   $(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'http://www.crysol.com/crysol_soft/Ajax_Search/search.php?key=%QUERY',
        limit : 10
    },
    error: function(jqxhr, textStatus, errorThrown) {
                    alert('custom message. Error: ' + errorThrown);
                }
    success: function(data, textStatus, jqxhr) {
                    // hide error message
                }
    );
});

    </script>
    <style type="text/css">
.bs-example{
    font-family: sans-serif;
    position: relative;
    margin: 50px;
}
.typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 396px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}
.tt-suggestion {
    font-size: 24px;
    line-height: 24px;
    padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}
</style>
  </head>
  <body>
    <div class="row">
      <div class=".col-md-6">
        <div class="jumbotron">
        <h1>Ajax Search Box using Node and MySQL <small>Codeforgeek Tutorial</small></h1>
         <button type="button" class="btn btn-primary btn-lg">Visit Tutorial</button>
      </div>
  </div>
  <div class=".col-md-6">
    <div class="panel panel-default">
    <div class="bs-example">
        <input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
    </div>
  </div>
  </div>
  </div>
  </body>
</html>

当我在网址中运行http://www.crysol.com/crysol_soft/Ajax_Search/search.php时，它运行正常。我有一个ebn在search.php中放了一个echo命令来检查它是否调用了search.php，但它没有回显任何内容。

这背后的原因可能是什么。

Answer 1

某些响应引用了BootStrap 2 typeahead，它在BootStrap 3中不再存在。请尝试下面的代码

试试这个并检查一下是否有效。

 $('input.typeahead').typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      limit: 10,
      async: true,
      name: 'typeahead',
      source: function (query, process) {

        return $.ajax({
          url: "http://www.crysol.com/crysol_soft/Ajax_Search/search.php?key=%QUERY", 
          type: 'GET',
          data: {key : query},
          dataType: 'json',
          success: function (json) {
            // in this example, json is simply an array of strings
            var json = JSON.parse(data); // string to json
            return process(json.options);
          }
        });
      }
    });

在输入字段中添加 typeahead 类。

ajax autocomplete typeahead不调用PHP

1 个答案: