在导航栏中的搜索表单上使用jQuery for Action Listeners

Using jQuery for Action Listeners on a Search Form in a Navbar

本文关键字：jQuery for Listeners Action 表单 导航 搜索表 搜索      更新时间：2023-09-26

我一直在尝试为Bootstrap Navbar中的下拉菜单正确添加一个操作事件侦听器。到目前为止，我实现它的方式是有效的，但我一直试图将代码压缩为一个动作侦听器，以便在添加其他动作侦听器时使用。此外，当输入的值为空时，我似乎无法替换搜索输入元素的属性占位符：

var main = function(){
$('#searchStream').click(function(event) {
    $('#searchMethod').html("Streams <span class='"caret'"></span> ");
})
$('#searchPlayer').click(function(event) {
    $('#searchMethod').html("Players <span class='"caret'"></span> ");
})
$('$submitSearch').click(function(event){
    var searchMethod = $('#searchMethod').val();
    var method = "";
    if(searchMethod.find('Streams') == true){
        method = "Streams";
    }
    else if(searchMethod.find('Players') == true){
        method = "Players";
    }
    else if ($('#searchInput').val() == "") {
        $('input').attr("placeholder","Enter Search Term");
    }
})
}

以下是使用动作侦听器的元素的HTML：

<li><form name = "search" class="navbar-form navbar-right" role="search">
    <div class="form-group">
    <input type="text" class="form-control" id="searchInput" placeholder="Search" />
    </div>
        <!-- Search Dropdown -->
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="searchMethod">Search <span class="caret"></span> </button>
    <ul class="dropdown-menu" role="menu" id="searchMenu">
    <li id="searchStream"><a href="#">Streams</a></li>
    <li id="searchPlayer"><a href="#">Players</a></li>
    </ul>
    </div></li>
        <!-- Search Submit Button -->
    <button type="submit" class="btn btn-default" id="submitSearch">Submit</button>
    </form></li>
    </ul>

下面是我尝试为下拉菜单操作监听器压缩jQuery的一个示例：

$('#searchMenu').children().click(function(event){
  var elementText = $(this).val();
  if($.contains($(this), "Streams") == true) {
    $('#searchMethod').html("Streams <span class='"caret'"></span> ");
  }
  elseif($.contains($(this), "Players") == true) {
    $('#searchMethod').html("Players <span class='"caret'"></span> ");
  }
})

我尝试过使用多个实现，但一直未能使其发挥作用。我甚至在"=="answers"==="之间切换，或者在"elseif"answers"else-if"之间切换。

对于带有下拉按钮文本更改的第一部分，您可以使用以下代码：

$('#searchMenu li a').on('click', function (event) {
    var elementText = $(this).text();
    $('#search-text').text(elementText);
});

所以当你们点击任何一个下拉元素时，你们首先抓取它的文本，然后把它放在下拉按钮中。我已经用#search-text id将下拉按钮文本包装在span元素中，这样就可以很容易地访问它。

关于提交表单部分：

$('form[name="search"]').on('submit', function(event){
    var method = $('#search-text').text();
    if ($('#searchInput').val() == "") {
        $('input').attr("placeholder","Enter Search Term");
        return false;
    }
});

我更喜欢处理表单提交事件，而不是按钮点击，这样你也可以处理keybord和enter按键。您的代码没有显示您想要对method变量执行的操作。你们可能想把它和表单一起传递，所以最好的方法是把值放在一些隐藏的字段中。

这是小提琴https://jsfiddle.net/mxug7fqt/

相关文章：