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

最新推荐文章于 2022-04-29 16:51:03 发布

发疯的man

最新推荐文章于 2022-04-29 16:51:03 发布

阅读量882

点赞数

分类专栏： easyui 文章标签： jquery java html json 数据

easyui 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

上一篇讲了如何使用 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 数据。

发疯的man

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java中用jquery AutoComplete 实现自动补全(二)本地JSON实现自动补全

上一篇讲了如何使用 jquery autocomplete 插件写一个简单的自动补全功能，这一篇在上一篇的基础上进一步进行讲解，还是和上面一样先引文件，具体的就不说了，不会的再看看上一篇，上一篇用的数据是数组，这里我们用JSON数据来写一个简单的例子，如下例子所示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http
复制链接

扫一扫