Question

我正在使用带有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);
     });
  }
});

autocomplete是一个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>

但没有发生任何事情......

作为参考，我找到了一个功能完美的功能，但仅当用户按下enter：

时

<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>

我试图自定义此功能以便鼠标移除但没有运气。

提前感谢您的帮助！

Answer 1

JSFiddle会有所帮助，但无论如何都要尝试：

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

我在做什么：

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

这确保在DOM准备就绪时执行所有代码，换句话说，当浏览器加载了所有页面时。通常，您希望将所有代码放在准备好的文档中

<强>遍历

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

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

Answer 2

Bootstrap会将所选项目更改为“活动”状态。点击。因此，您应该尝试将click事件绑定到li标记。你能试试下面的片段吗？

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

Answer 3

我终于找到了解决方案 - 我已经做了一些研究，看起来将点击或其他事件附加到Bootstrap下拉菜单并不容易 - 但经过多次尝试之后，这就是我的情况。< / p>

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

Answer 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.
});

表单从自动填充搜索框提交

4 个答案: