如果单击"输入"按钮,则返回搜索结果

Question

如果按下输入按钮,我一直在努力尝试触发按钮.我尝试过trigger()并点击()并没有运气.我无法弄清楚为什么它不会执行,并且当用鼠标单击时搜索按钮可以正常工作,但是当按下输入按钮时则不能.

$(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设置对象内并导致语法错误
• 将success在处理函数$.ajax没有正确关闭.

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

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