input框动态模糊查询，能输入，能选择

最新推荐文章于 2024-05-03 11:47:20 发布

p是马甲

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量2.3k

点赞数 3

文章标签： javascript python php ViewUI

原文链接：http://www.cnblogs.com/xshan/p/9753337.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input type="text" name="batch" placeholder="设备号" class="form-control" id="batch"  list="batch_list" autocomplete="off">
 9 <!-- 选择内容 -->
10 <datalist id="batch_list">
11 </datalist>
12 <!-- 动态加载选择的内容 -->
13 <script>
14     $('input#batch').bind('keyup', function () {
15         var batch = $('input#batch').val();
16         $.ajax({
17             url: "/search_batch/",
18             type: "GET",
19             dataType: 'json',
20             data: {'batch': batch},
21             async: false,
22             success: function (arg) {
23                 $('datalist#batch_list').empty();
24                 for (var i = 0; i < arg.length; i++) {
25                     var add_options = '<option value="' + arg[i] + '">'+ arg[i] + '</option>';
26                     $('datalist#batch_list').append(add_options);
27                 }
28             }
29         })
30     });
31 </script>
32 </body>
33 </html>

注意：

1、关闭输入框的历史记录功能，autocomplete="off"。否则会将用户的输入历史记录也显示出来。

2、datalist标签的id要与input标签的list属性的值一致。

3、动态获取input的输入值，给input标签绑定“keyup”事件。

4、本实例使用了jQuery和bootstrap框架。

转载于:https://www.cnblogs.com/xshan/p/9753337.html

p是马甲

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
input框动态模糊查询，能输入，能选择

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input ty...
复制链接

扫一扫