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

最新推荐文章于 2024-08-28 09:45:00 发布

Iamagril

最新推荐文章于 2024-08-28 09:45:00 发布

阅读量3.7k

点赞数

文章标签： json jquery autocomplete 自动补全

本文链接：https://blog.csdn.net/Iamagril/article/details/48340949

版权

本地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 数据。