从自动完成搜索框提交表单答案

【问题标题】：Form submit from autocomplete search box从自动完成搜索框提交表单
【发布时间】：2016-01-04 15:08:26
【问题描述】：

我正在使用带有 Bootstrap 的 CodeIgniter 构建一个网站，并且我有一个表单，每个页面的标题中有两个搜索字段。

<form action="<?php echo base_url(); ?>index.php/search/searchData" method="post" name="searchf" class="form Searchf" id="searchForm">
<input name="A1"  class="menu-link Searchbox S1" id="S1"/>
<input name="A2" class="menu-link Searchbox S2" id="S2"/>
<input type="submit" id="submitSearchA"/>
</form>

对于两个搜索字段（S1 和 S2）中的每一个，我都有一个自动完成列表，可以在其中选择特定项目。

$('#S1').typeahead({
 source: function (query, process) {
  return $.post(base_url + 'index.php/search/autocomplete/', { query: query, database : "airlines" }, function (data) {
  return process(data);
       });
    }
});


$('#S2').typeahead({
source: function (query, process) {
return $.post(base_url + 'index.php/search/autocomplete/', { query: query, database : "airports" }, function (data) {
return process(data);
     });
  }
});

自动完成是一个 Bootstrap 类，代码如下：

<ul class="typeahead dropdown-menu" role="listbox" style="top: 50px; left: 287px; display: none;">
 <li class=""><a href="#" role="option">...</a></li>
 <li><a href="#" role="option">...</a></li>
 <li><a href="#" role="option">...</a></li>
 .....
 <li class="active"><a href="#" role="option"></a></li>
 ....
 <li><a href="#" role="option">....</a></li>
</ul>

我想要的是 jquery 中的代码，以便一旦从下拉列表中单击项目（'a'），就应该触发表单提交。在 Bootstrap 中，单击的项目位于 li class="active" 下方，如您在上面的代码中所见。

请在下面找到我的尝试。

<script type="text/javascript">
$('ul.typeahead').each(function(){
    var $itemclicked = $('li.active').find('a');
    $itemclicked.on('click',function(){   
      $('#searchForm').submit();
    });
 });
</script>

但是什么都没有发生.....

作为参考，我发现了一个完美的功能，但前提是用户按下回车键：

<script type="text/javascript">
// Using jQuery.

$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });

        $(this).find('input[type=submit]').hide();
    });
});
</script>

我已经尝试自定义它以适用于鼠标悬停但没有运气。

提前感谢您的帮助！

【问题讨论】：

标签： jquery html twitter-bootstrap codeigniter

【解决方案1】：

Bootstrap 会在点击时将所选项目更改为“活动”。所以你应该尝试将点击事件绑定到 li 标签。可以试试下面的sn-p吗？

<script type="text/javascript">
  $(document).ready(function(){
     $('ul.typeahead li').on('click',function(){   
        $('#searchForm').submit();
     });
  });      
</script>

【讨论】：

谢谢你，Deva，但它不会触发表单提交。
@RoxanaRaicu 控制台说什么？
它没有显示任何错误...或者请告诉我我还应该寻找什么？
做一个console.log in click回调，检查是否先调用函数？
不带.active类的
标签内的标签上绑定click事件怎么样？

【解决方案2】：

JSFiddle 会有所帮助，但还是试试吧：

<script>
    $(document).ready(function(){
      var item = $("ul.typeahead").find("li.active");
      item.on("click", "a", function(){
        $("#searchForm").submit();
      });
    });
</script>

我在做什么：

$(document).ready(function(){    .....    });

这可确保您的所有代码在 DOM 准备就绪时执行，换句话说，当所有页面都已被浏览器加载时。通常你想把你所有的代码都放在'document ready'中

穿越

var item = $("first-elem").find("second-elem");

item.on("click", "third-elem", function(){   .....   })

【讨论】：

【解决方案3】：

我终于找到了解决方案 - 我做了更多的研究，似乎将点击或其他事件附加到 Bootstrap 下拉菜单并不容易 - 但经过多次尝试，这对我来说是有效的。

$(window).load(function(){
 $('body').on('mousedown','a',{role:'option'},function(e){
  $('#submitSearchA').trigger('click');  
  });
});

【讨论】：

我怀疑问题出在提交的表单中，然后 typeahead 函数可以将正确的查询放在输入标签中。无论如何，很高兴您找到了解决方案。如果可以，请发布您的来源/解释并将答案标记为正确。

【解决方案4】：

你要找的是.closest()函数。

$(this).closest("form").submit();

所以你的代码变成了...

var $itemclicked = $('li.active').find('a');
$itemclicked.on('click',function(){   
  $(this).closest("form").submit(); // <= Here we are making the nearest form to submit.
});

【讨论】：