Input标签实现模糊查询

最新推荐文章于 2024-06-13 17:25:04 发布

原创最新推荐文章于 2024-06-13 17:25:04 发布 · 3.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Input #模糊查询

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用 jQuery UI 实现输入框自动补全功能。通过引入必要的 CSS 和 JavaScript 文件，设置 input 标签，并结合 AJAX 获取数据，实现了用户输入时的实时建议列表显示。

1、引入：

 <link rel="stylesheet" href="http://code.jQuery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/JavaScript"  src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript"  src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

2、input标签：

<input type="text" name="PERSONNAME" id="PERSONNAME" value="${pd.PERSONNAME}" maxlength="32" placeholder="这里输入姓名" title="姓名" />

3、JS代码：页面加载函数中：

	//定义新数组
	var mdmcData = new Array();
	var _mdmcData = new Array();

	//自动填充
	$("#PERSONNAME").autocomplete({
		source : _mdmcData
	});
	
	//监听输入框的键盘(输入)事件
	$("#PERSONNAME").keyup(function(event) {
			//输入的值
			var name = $("#PERSONNAME").val();
			//判断是否有内容输入
			if (name.length >0){
				//异步获取需要的值
				$.ajax({
					type : "get",
					url : "dept/findPerson.do?PERSONNAME="+name,
					dataType : "JSON",
					success : function(data) {
						//处理数组
						$.each( data, function(i, n){
							mdmcData[i] = n.PERSONNAME;
						});
						//必须赋值到页面，才能获取到值
						$("#hiddenMdmc").val(mdmcData);
						//给需要的数组赋值
						var _data = $("#hiddenMdmc").val().split(",");
						for (var j = 0; j < _data.length; j++) {
							_mdmcData[j] = _data[j];
						}
					}
				});
			}
		});

5、实现效果：