java中用jquery AutoComplete 实现自动补全(二)本地JSON实现自动补全

本地JSON实现自动补全

      上一篇讲了如何使用 jquery autocomplete 插件写一个简单的自动补全功能,这一篇在上一篇的基础上进一步进行讲解,还是和上面一样先引文件,具体的就不说了,不会的再看看上一篇,上一篇用的数据是数组,这里我们用JSON数据来写一个简单的例子,如下例子所示:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动补全功能</title>
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<link   rel="stylesheet" href="jquery.autocomplete.css"  />
<script  type="text/javascript">
    //本地数据<JSON>
    var datas = [
      {stuName:'李四',age:23},
      {stuName:'周周',age:26},
      {stuName:'张新款',age:45},
	  {stuName:'李银',age:45},
	  {stuName:'周娟',age:45},
	  {stuName:'张丽',age:45},
      {stuName:'张三',age:67}
    ];

	
	//开始
	$().ready(function ()
	{
	     $("#autoComplete").autocomplete(datas,
		{
		    minChars: 0,
			max: 5,
			autoFill: true,
			mustMatch: true,
			matchContains: true,
			formatItem: function (data, i, total) {
			  return "<I>" + data.stuName + "</I>"+data.age;
			}, formatMatch: function (data, i, total) {
			  return data.stuName;
			}, formatResult: function (data) {
			  return data.stuName;
			}	
			
		});
	});


//搜索数据
       function onSearch()
       {
    	  var nickName =$("#autoComplete").val(); 
    	   alert(nickName);
       }
</script>
</head>

<body>
   <input  type="text" id="autoComplete" placeHolder="请输入要搜索的内容!"/>
   <input type="button" name="btnSearch" οnclick="onSearch();" value="搜索"/>
</body>
</html>
这一篇比较简单,是从页面直接得到 JSON数据,下一篇介绍从服务器后台获取 JSON 数据。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值