javascript - 无法接收目标文件Typeahead.js中的值

我已经编写了一些脚本来自动填充搜索输入（来自数据库的搜索数据），并与查询一起在远程url中发送一些动态变量以进行高级搜索。

但是我没有在目标文件中接收任何数据，如果仅在“远程”中发送查询，则可以正常工作，但与远程url中的动态变量一起，则无法正常工作！请检查我的代码并指导我哪里做错了

<script src="typeahead.min.js"></script>
   <script>
$(document).ready(function(){
$('input.typeahead').typeahead({
    name: 'typeahead',
    //remote:'subtasksearch.php?key=%QUERY',
    //remote:'subtasksearch.php?key=%QUERY&&mani=123',
    remote: {
    url: 'subtasksearch.php?key=%QUERY&&mani=',
    replace: function () {
        var q = 'subtasksearch.php?key=%QUERY&&mani=';
        if ($('#country').val()) {
            q += encodeURIComponent($('#country').val());
        }
        return q;
      }
    },
    limit : 10
});
 });
</script>

我的subtasksearch.php是

<?php
$key=$_GET['key'];
$mani=$_GET['mani'];
$array = array();
$con=mysqli_connect("localhost","","","");

if (mysqli_connect_errno())
 {
   echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }


$query=mysqli_query($con, "select * from sub_task where name LIKE '%{$key}%'");
while($row=mysqli_fetch_assoc($query))
{
  $array[] = $row['name'];
  //$array[] = $mani;
}
echo json_encode($array);

我的搜索输入是

 <input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Task" required="">

如果您使用简单的远程发送查询其工作正常

remote:'subtasksearch.php?key=%QUERY',
//or
remote:'subtasksearch.php?key=%QUERY&&mani=123',

由于远程url中的动态变量不起作用，我在控制台中观察到一些数据在URL中传递并返回空数组的情况，我想请检查一下波纹图



请指导我我错了！我是用错误的方式发送值吗？

最佳答案

我认为问题在于如何发送查询变量-您正在发送原义％QUER而不是实际查询值。

url: 'subtasksearch.php?key=%QUERY&&mani=',

应该是包含变量的东西

url: 'subtasksearch.php?key='+QUERY+'&&mani=',

不确定typeahead插件，但是this.val()足以获取值，例如：

url: 'subtasksearch.php?key='+this.val()+'&mani=',

另外，请考虑使用Prepared Statements修补注入风险（即使在MySQLI中也是如此）：How can I prevent SQL injection in PHP?

更新资料

因此，查看您使用的实际插件，您似乎需要为建议框配置Bloodhound，而不仅仅是单独进行预先输入。这意味着包括Bloodhound javascript源或使用捆绑软件。

<script src="http://twitter.github.com/typeahead.js/releases/latest/typeahead.bundle.min.js"> </script>
<script>
var tasks = new Bloodhound({
    remote: {
        url: 'subtasksearch.php?key=%QUERY.json',
        wildcard: '%QUERY'
    }
});

$('input.typeahead').typeahead({
    name: 'typeahead',
    source: tasks,
    limit: 10
  });
 </script>

第二次更新

我不确定Bloodhound在屏幕后面的作用，是否可以让您构造如下查询：

var country = $('#country').val()
var tasks = new Bloodhound({
    remote: {
        url: 'subtasksearch.php?key=%QUERY.json'+'&country='+country,
        wildcard: '%QUERY'
    }
});