首页JQ 实现input输入完后自动查询

JQ 实现input输入完后自动查询

时间: 2023-06-20 12:08:39 浏览: 301

你可以使用 jQuery 的 `keyup()` 事件来监听输入框的内容变化，然后在事件处理程序中发送 AJAX 请求来查询数据。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>自动查询示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ // 监听输入框的输入事件 $("#search-input").keyup(function(){ // 获取输入框的值 var keywords = $(this).val(); // 发送 AJAX 请求查询数据 $.ajax({ url: "search.php", data: {keywords: keywords}, success: function(result){ // 显示查询结果 $("#search-result").html(result); } }); }); }); </script> </head> <body> <input type="text" id="search-input" placeholder="请输入关键词"> <div id="search-result"></div> </body> </html> ``` 在这个示例中，当用户在输入框中输入文本时，`keyup()` 事件会被触发，然后获取输入框的值并发送 AJAX 请求到 `search.php` 页面，查询数据。查询结果会在 `#search-result` 元素中显示出来。你需要根据实际情况修改代码中的 URL 和 AJAX 请求参数。

阅读全文