Question

美好的一天。我开始使用bootstrap3-typeahead.min.js版本4.0.2，并且它运行良好，效果非常好。我的Twitter-Bootstrap版本是3.3.7。

所以，据我所知，我必须使用特殊的预先输出脚本，因为这个版本没有。

在这里和其他页面搜索时，我找到了一个脚本，当我选择我想要的选项时，它会自动触发表单，虽然它不起作用，它只会将搜索的值放在输入。尝试放置console.log，但是，它也没有触发它。这是twitter-bootstrap3 typeahead的在线脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>

这是我的代码：

$(document).ready(function(){
$('#valor').typeahead({
source: function(query, result)
{
 $.ajax({
  url:"mySearchUrl.php",
  method:"POST",
  data:{query:query},
  dataType:"json",
  success:function(data)
   {
     result($.map(data, function(item){
     return item;       
   }));   
  }
 })
}
 }).on('typeahead:selected', function(e){
  console.log("hello");
  e.target.form.submit();
 });
});

这是我的表格：

<form class="navbar-form navbar-left" id="form_buscar" name="form_buscar" method="post" action="myurl.php">
      <div class="input-group">
       <input type="text" name="valor" id="valor" class="form-control" autocomplete="off" placeholder="Buscar nombre, credito o calle" />
        <div class="input-group-btn">
          <button class="btn btn-default" name="buscar" id="buscar" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>

除了所选事件的部分外，一切都很有效。

另外，我已经阅读了关于这个其他脚本的内容，但我似乎无法使其工作：

 $('#valor').on('typeahead:select', function(evt, item) {
    console.log(evt)
    console.log(item)

})

提前致谢。

表单的Bootstrap typeahead select事件

0 个答案: