Javascript 带引导标记的输入超前，mysql

好的，所以Iv'e最近一直在尝试使用twitter typeahead和引导标记put，在这里可以找到

我不想在键入输入标记时向数据库发送查询并显示用户名，我知道这是可能的，因为上面链接的标记输入页面上有这样的说明。虽然我已经尝试了无数种使用猎犬的方法，但它似乎不起作用

下面是我的HTML\Javascript

<form id="msgForm" action="process2.php" method="POST" name="msgForm" class="form-horizontal" role="form">

  <div id="remote" class="input-group" style="padding-bottom:10px;">
    <span class="input-group-addon"><span class="glyphicon glyphicon-user" style="font-size: 15px;"></span></span>
    <input type="text" class="form-control" name="msgUser" id="msgUser" placeholder="Users Seperated by ," data-role="tagsinput" />
  </div>

  <script>
    var bestPictures = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      null,
      remote: {
        url: 'search.php?query=%QUERY',
        wildcard: '%QUERY'
      }
    });

    $('#remote .input').typeahead(null, {
      name: 'best-pictures',
      display: 'value',
      source: bestPictures
    });
  </script>

  <i><div style="padding-bottom:7;"id="title_message"></div></i>
  <div class="input-group" style="padding-bottom:10px;">
      <span class="input-group-addon"><span class="glyphicon glyphicon-cog"></span></span>
      <input type="text" maxlength="30" class="form-control input-md" autocomplete="off" name="msgTitle" id="msgTitle" placeholder="Message Title"/><br />
  </div>

  <i><div style="padding-bottom:7;"id="main_message"></div></i>
  <div class="input-group">
      <span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
      <textarea class="form-control" maxlength="500" rows="5" name="main" id="main" placeholder="Your message..."></textarea>
  </div>

  <button type="submit" class="form-control input-md" style="margin-top:20;" name="btnmsg" id="btnmsg">Send Message</button>
</form>

var bestPictures=新猎犬({
datumTokenizer:Bloodhound.tokenizers.obj.whitespace（'value'），
queryTokenizer:猎犬，标记，空白，
无效的
远程：{
url:'search.php？query=%query'，
通配符：'%QUERY'
}
});
$（'#remote.input'）.typeahead（null{
名称：“最佳影片”，
显示：“值”，
资料来源：bestPictures
});


发送消息

下面是search.php中的php代码：

<?php

include("functions.php");

$param = "{$_GET['query']}%";

// do query
if ($stmt = $con->prepare("SELECT username FROM users WHERE username LIKE ?")) {
    $stmt->bind_param("s", $param);
    $stmt->execute();
}

// populate results
$results = array();

$result = $stmt->get_result();
while ($row = $result->fetch_array(MYSQLI_NUM)) {
  foreach ($row as $r) {
    $results[] = $r;
  }
}

// and return to typeahead
return json_encode($results);

?>

---

在代码中有
$（“#remote.input”）.typeahead（
在JS中。但是id为remote的div中的输入没有类输入。因此它应该是
$（“#msgUser”）.typeahead（

编辑：
这是我的一个带有远程ajax调用的typeahead，它有一个用于搜索结果的自定义模板，因此您可以跳过该部分

var producten = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: {
        'cache': false,
        url: 'ajax/htmlProducten.php?q=%QUERY',
        wildcard: '%QUERY',
        filter: function (data) {
            return data;
        }
    }
});
/*data initialiseren */
producten.initialize();
/* Typeahead gedeelte */
$('.typeahead').typeahead(null, {
    name: 'addZoek',
    source: producten.ttAdapter(),
    displayKey: 'artikelNaam',
    templates: { //here starts the custom display setup
        suggestion: function (producten) {
            if(producten.voorraadID!=null) {
                $style="style='color:red'"
            } else {
                $style='';
            }
            if(producten.vers==1){
                $vers='(vers)';
            } else {
                $vers='';
            }
            resultaat= '<div '+$style+'>'+
                '<strong>' + producten.artikelNaam + ' '+$vers+'</strong>' +
                '<br>' + producten.inhoud + ' ' + producten.type + ' - ' + producten.artikelMerk + 
            '</div>';
        }
        return resultaat;
    }
});

var producten=新猎犬({
datumTokenizer:Bloodhound.tokenizers.obj.whitespace（'name'），
queryTokenizer:猎犬，标记，空白，
限额：100，
远程：{
“缓存”：false，
url:'ajax/htmlProducten.php？q=%QUERY'，
通配符：“%QUERY”，
过滤器：功能（数据）{
返回数据；
}
}
});
/*数据初始化器*/
producten.initialize（）；
/*超前打字*/
$（'.typeahead'）.typeahead（null{
名称：“addZoek”，
来源：producten.ttAdapter（），
显示键：“artikelNaam”，
模板：{//此处开始自定义显示设置
建议：功能（producten）{
if（producten.voorraadID！=null）{
$style=“style='color:red'”
}否则{
$style=''；
}
如果（产品版本==1）{
$vers='（vers）'；
}否则{
$vers=''；
}
结果AT=''+
“”+producten.artikelNaam+“+$vers+””+
“
”+producten.inhoud+'+producten.type+'-'+producten.artikelMerk+
'';
}
返回结果at；
}
});

只要检查一下你是否可以用这段代码做些什么，让它为你工作。

显然，twitter的官方版本不再适用于Bootstrap3。因此，我从这里得到了一个新的.js文件，它似乎适用于以下代码

<div id="remote" class="input-group" style="padding-bottom:10px;">
  <span class="input-group-addon"><span class="glyphicon glyphicon-user" style="font-size: 15px;"></span></span>
  <input data-provide="typeahead" autocomplete="off" name="msgUser" id="msgUser" type="text" class="form-control" placeholder="Users Seperated by ," data-role="tagsinput" />
</div>

<script>
  $('#msgUser').tagsinput({
    typeahead: {
      source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
    }
  });
</script>


$（'msgUser'）。标记输入({
提前打印：{
资料来源：[“阿姆斯特丹”、“华盛顿”、“悉尼”、“北京”、“开罗”]
}
});

但是我仍然无法让它与我的search.php？查询文件一起工作，因此我们将感谢您提供的任何进一步帮助！
您收到了什么错误？它是否正在发送？php是否自行运行？它是否接收到？控制台中有任何错误？当我转到我的url并键入用户名时，php运行正常。它不允许我在控制台中检查javascript，因此我假设是这样的…那么如果你转到
search.php？query=Bob
，你会看到JSON数据吗？哦，它以前确实工作过…我一定做了一些更改。实际上，当我回显它时，它确实会显示JSON，只是当我返回它时它不会显示，只是升级到了一个新的类型，因为官方版本显然没有为bootstrap 3更新。我已经为下面我已经发布了答案中的代码，但我仍然在努力使它适用于我的php json文件