从文本框中删除自动搜索并在搜索按钮上搜索

Posted 2023-05-07

【中文标题】从文本框中删除自动搜索并在搜索按钮上搜索

【英文标题】：Remove auto search from text box and search upon search button

【发布时间】：2016-01-21 04:05:19

【问题描述】：

我正在使用 jQuery 数据表，我试图弄清楚如何从“搜索按钮”而不是从文本框中自动进行搜索。

我正在编写一个单页应用程序，因此有多个提交按钮，这使得这很困难，因为我只希望它从那个特定的搜索按钮进行搜索，而不是在提交时触发其他提交按钮。

我用谷歌搜索了它，但没有一个结果是成功的。如何在提交搜索按钮时从输入中获取值以便正确调整数据表。

然后我希望搜索按钮更改文本以退出搜索以将数据表恢复到正常状态，就像您只是从文本框中删除文本一样。对此的任何帮助将不胜感激。

JS

// Search Mode allows to search tables
    $("#Search").on("click",function()
        $("#ItemID").prop("disabled", false);
        $("#ESearch").show();
        $("#Search").hide();

      // Allows ItemID to search through database
      $('#ItemID').keyup(function()
        oTable.search($(this).val()).draw() ;
      );

    );

    // Exit out of EXIT SEARCH mode
    $("#ESearch").on("click",function()
        $("#ItemID").val("");
        $("#ItemID").prop("disabled", true);
        $("#Search").show();
        $("#ESearch").hide();
    );

html

<input type="text" class="form-control" name="ItemID" id="ItemID" maxlength="15"> 
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="Search">SEARCH</button>
<button style="display:none;" type="button" class="btn btn-default" id="ESearch">EXIT SEARCH</button>
</span>

【参考方案1】：

没有理由添加新的搜索<input>，可以重用默认。下面的代码重置了当您在默认的<input> 框中键入时发生的默认搜索/过滤，然后添加两个在单击时执行/清除搜索/过滤的按钮。

var table = $('#example').DataTable(
    initComplete : function() 
        var input = $('.dataTables_filter input').unbind(),
            self = this.api(),
            $searchButton = $('<button>')
                       .text('search')
                       .click(function() 
                          self.search(input.val()).draw();
                       ),
            $clearButton = $('<button>')
                       .text('clear')
                       .click(function() 
                          input.val('');
                          $searchButton.click(); 
                       ) 
        $('.dataTables_filter').append($searchButton, $clearButton);
                
)  

演示 -> http://jsfiddle.net/zuv05qbj/

【讨论】：

很好的解决方案。谢谢

很好的解决方案！但对我来说，新添加的按钮位于搜索框的左侧（之前）。必须对附加代码进行一些更改。 var $searchDivParent = $('#example_filter').parent(); $searchDivParent.append($clearButton,$searchButton, $('#example_filter'));

完美，尽管我需要更改点击事件以停止页面提交。 .click(function(e) e.preventDefault(); 成功了。

【参考方案2】：

与大卫惊人的答案一样，您也可以绑定 ENTER 键来执行搜索，方法是在按下时调用搜索按钮单击事件：

initComplete : function() 
    var self = this.api();
    var filter_input = $('#'+settings.nTableWrapper.id+' .dataTables_filter input').unbind();
    var search_button = $('<button type="button">Search</button>').click(function() 
        self.search(filter_input.val()).draw();
    );
    var clear_button = $('<button type="button">Clear</button>').click(function() 
        filter_input.val('');
        search_button.click();
    );

    $(document).keypress(function (event) 
        if (event.which == 13) 
            search_button.click();
        
    );

    $('#'+settings.nTableWrapper.id+' .dataTables_filter').append(search_button, clear_button);

如果页面上有多个数据表也可以使用 :)（注意使用 settings.nTableWrapper.id）

【参考方案3】：

刚刚实现了这个，效果很好。我添加了一个图标按钮和一些简单的 flex css 以使它们内联。

var input = $('.dataTables_filter input').unbind(),
self = this.api(),
      $searchButton = $(`<button type="submit" 
                              class="btn btn-inverse dtSearchButton" 
                              id="button_search" 
                              data-toggle="tooltip" 
                              title="Apply Search"
                              style="padding:0,5px,0,5px"
                      >
                      <i class="fas fa-search"></i>
                      </button>`)
                  .click(function() 
                    self.search(input.val()).draw();
                  ),
      $clearButton = $(`<button 
                          type="button" 
                          class="btn btn-inverse dtSearchButton" 
                          id="button_trash" 
                          data-toggle="tooltip" 
                          title="Clear Search"
                          style="padding:0,5px,0,5px"
                        >
                        <i class="fas fa-trash"></i>
                        </button>`)
                .click(function() 
                    input.val('');
                    $searchButton.click(); 
                ) 
      
      $('.dataTables_filter').append($searchButton, $clearButton);

然后在css中：

.dataTables_filter
  display:flex;

最终输出