回车自动提交搜索

本文介绍了一种使用jQuery实现前端搜索框自动提交的方法,当用户在输入框内按下回车键时触发搜索功能,并更新URL参数以实现页面刷新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端代码:

<!-- 高级搜索 -->
    <div class="search-form fr cf">
        
          <div class="sleft">
            <input type="text" placeholder="请输入证书编号搜索" value="" class="search-input" name="keyword" />
                    <a id="search" href="javascript:;" onclick="searchSo();" class="sch-btn">
    <i class="btn-search"></i></a>
          </div>

    </div>

<!-- 多维过滤 --> 


Jquery 代码

//回车自动提交
    $('.search-form').find('input').keyup(function(event){

        if(event.keyCode===13){

                      // $("#search").click();  可以用这个

                       var url = $('#form_search').attr('action');
       var str = $('input[ name = keyword]').val();
       var query  = 'keyword='+str.replace(/(^\s*)|(\s*$)/g,"");
       if( url.indexOf('?')>0 ){
           url += '&' + query;
       }else{
           url += '?' + query;
       }
       window.location.href = url;
        }
    });
### 如何通过回车键触发搜索 可以通过监听键盘事件来实现回车键触发搜索功能。以下是具体的实现方式: #### 使用 `onkeydown` 或 `addEventListener` 方法捕获按键事件 可以为文档或者特定的输入框绑定键盘按下事件,当检测到用户按下了回车键(keyCode 为 13)时,执行相应的搜索逻辑。 ```javascript document.onkeydown = function(e) { var ev = document.all ? window.event : e; if (ev.keyCode === 13) { // 检测是否按下的是回车键 $("#enterSearch").click(); // 调用搜索按钮的点击事件[^1] } }; ``` 如果使用现代 JavaScript 的写法,则推荐使用 `addEventListener` 替代直接赋值给全局对象的方式: ```javascript document.addEventListener('keydown', function(event) { if (event.key === 'Enter') { // 判断是否按下 Enter 键 const searchButton = document.getElementById('enterSearch'); if (searchButton) { searchButton.click(); // 执行搜索按钮的点击行为 } } }); ``` #### 在表单中自动提交 HTML 表单天然支持回车键触发提交的行为。因此,在某些场景下可以直接利用这一特性而无需额外编写脚本。 ```html <form id="searchForm"> <input type="text" name="query" placeholder="请输入关键词..." /> <button type="submit">搜索</button> </form> <script> document.getElementById('searchForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认提交动作 const queryValue = this.querySelector('[name=query]').value.trim(); console.log(`正在搜索: ${queryValue}`); // 自定义处理逻辑[^2] }); </script> ``` 对于非表单内的输入框,也需要手动模拟上述机制以响应用户的交互需求。 #### 结合实际案例扩展功能 假设页面上存在一个独立于任何表单之外的输入框以及对应的搜索按钮,那么可以在该输入框上单独附加事件处理器完成相同目标。 ```html <div class="search-container"> <input type="text" id="customInput" placeholder="请输入关键词..."> <button id="customSearchBtn">搜索</button> </div> <script> const inputField = document.getElementById('customInput'); const buttonElement = document.getElementById('customSearchBtn'); inputField.addEventListener('keypress', function(event) { if (event.key === 'Enter') { // 当前焦点位于此输入框并敲击了回车 buttonElement.click(); // 模拟点击关联的按钮[^3] } }); buttonElement.addEventListener('click', () => { alert(inputField.value || '未填写内容'); // 示例反馈操作 }); </script> ``` 以上三种方案分别适用于不同开发环境下的具体需求,开发者可以根据实际情况灵活选用最合适的办法实施。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值