jquery自动填充input框(如百度搜索一样,出现模糊提示)
一、基本思路如下
第一个html页面：
<html lang="en">
<head>
<meta charset="GBK" />
<title>页面</title>
<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>
<script type="text/javascript" >
$(function() {
//获取ajxa异步数据
var cityData = [ "java", "javaScript" ];
var mdmcData=["aa", "bb", "cac","dd","e"];
//自动填充1
$( "#inp1" ).autocomplete({
source: cityData
});
//自动填充2
$("#inp2").autocomplete({
source: mdmcData
});
});
</script>
</head>
<body>
<div class="ui-widget">
input框1：<input id="inp1" />
input框2：<input id="inp2" />
</div>
</body>
</html>
二、ajax举例说明
jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>客户选择门店页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.css" />
<script type="text/javascript" src="<s:url value="/js/jquery-1.8.3.js"/>"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
//定义新数组
var mdmcData=new Array();
var _mdmcData=new Array();
//自动填充门店名称
$("#ajaxMdmc").autocomplete({
source: _mdmcData
});
/**异步获取提示门店名称信息*/
//监听输入框的键盘(输入)事件
$("#ajaxMdmc").keyup(
function(event){
var data;
//获取输入的键码值(event.keyCode);
//输入的值
var city=$("#ajaxCity").val();
var mdmc=$("#ajaxMdmc").val();
//判断是否有内容输入
if(mdmc.length>0){
//异步获取需要的值
$.ajax({
type : "post",
contentType:"application/x-www-form-urlencoded;charset=GBK",
url : "${pageContext.request.contextPath}?",
data : "?="+?,
success : function(ret) {
//返回值是在action中以逗号为分割的json串："123,456,322,"
data=ret.split(",");
var len=data.length;
//处理数组
for(var i=0;i<len-1;i++){
mdmcData[i]=data[i];
};
//必须先赋值到页面，否则不能获取到值
$("#hiddenMdmc").val(mdmcData);
},dataType:"JSON"
});
//给需要的数组赋值
var _data=$("#hiddenMdmc").val().split(",");
for(var j=0;j<_data.length;j++){
_mdmcData[j]=_data[j];
}
}
}
);
});
</script>
</head>
<body >
<div class="ui-widget" >
<form action="${pageContext.request.contextPath}/?" method="post" >
<strong> 城市：</strong>
<input id="ajaxCity" type="text" style="width: 100px;"/>
<input id="hiddenCity" type="hidden" />
<strong>门店名称：</strong>
<input id="ajaxMdmc" type="text" style="width: 100px;"/>
<input id="hiddenMdmc" type="hidden" />
<input type="submit" style="width:50px;height: 20px;" value="查询"/>
<input type="reset" style="width:50px;height: 20px;" value="清空"/>
<input type="button" id="checkOk" style="width:50px;height: 20px;" value="确定"/>
</form>
</div>
</body>
</html>
三、注意
1、ajxa返回值格式：如，“123,,2121,424,2321,”一定要在action中处理成以逗号分隔的字符串
2、autocomplete()函数不能放在ajax调用的函数体内
四、效果图
图1、
图2、
注：以上测试通过，可以根据自己需要就行修改，如有不明白之处，请留言！
- 上一篇： [scala基础]--String的操作
- 下一篇：没有了
