jquery - 如果单击输入按钮，则返回搜索结果

Question

如果按下输入按钮，我一直在努力尝试触发该按钮。我尝试过触发()和点击()但没有运气。我不明白为什么它不会执行，并且当用鼠标单击时搜索按钮可以正常工作，但在按下回车按钮时却不能正常工作。

$(document).ready(function() {

    //alert("this");
    //$('#btnsearch').trigger('click');

$("#txtsearch").keyup(function(event){
    if(event.keyCode == 13){
        $("#btnsearch").click();
    }
});
    $('#btnsearch').click(function(event) {
        var searchText = $('#txtsearch').val();
        $.ajax({

            url: domain + "",
            type: "GET",
            headers: {
              Accept: "application/json;odata=verbose"
            },
            success: function(data) {


              $.each(data.d.results, function(index, item) {
                $('#tblResult tbody').append('<tr><td style="">' + '<a href = "' + item.Details + '">' + item.Title + '</td></tr>');


              }

            )};

          event.preventDefault();



        });
    });
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="navbar-form navbar-right">
                <div id="" class="navbar-form navbar-right">
                    <div class="input-group">
                        <input id="txtsearch" type="text" class="form-control" placeholder="Search" />
                        <div class="input-group-btn">
                            <button id="btnsearch" class="btn btn-default" type="button">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>

Answer 1

由于您的 input 已包含在 form 元素中，因此默认情况下您会获得此行为，因此 keyup 处理程序是多余的。

您遇到的更大问题是代码中的几个语法错误，您可以在运行问题中的代码片段时在控制台中看到这些错误。

• 您已经在 jQuery 之前添加了 Bootstrap。一定是相反的
• 您对 preventDefault() 的调用位于 $.ajax 设置对象内，并导致语法错误
• $.ajax 中的 success 处理函数未正确关闭。

当您解决这些问题时，它就可以正常工作:

$(function() {
  $('.navbar-form').submit(function(e) {
    e.preventDefault();
    var searchText = $('#txtsearch').val();

    $.ajax({
      url: domain,
      type: "GET",
      headers: {
        Accept: "application/json;odata=verbose"
      },
      success: function(data) {
        $.each(data.d.results, function(index, item) {
          $('#tblResult tbody').append('<tr><td><a href="' + item.Details + '">' + item.Title + '</td></tr>');
        });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="navbar-form navbar-right">
  <div id="" class="navbar-form navbar-right">
    <div class="input-group">
      <input id="txtsearch" type="text" class="form-control" placeholder="Search" />
      <div class="input-group-btn">
        <button id="btnsearch" class="btn btn-default" type="button">
          <i class="glyphicon glyphicon-search"></i>
      </button>
      </div>
    </div>
  </div>
</form>