您的位置：首页 > Web前端 > JQuery

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

2015-09-10 11:45 836 查看
本地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" onclick="onSearch();" value="搜索"/>
</body>
</html>
这一篇比较简单，是从页面直接得到 JSON数据，下一篇介绍从服务器后台获取 JSON 数据。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航