java中用jquery AutoComplete 实现自动补全(一)简单小例子

最新推荐文章于 2024-08-16 06:00:00 发布

Iamagril

最新推荐文章于 2024-08-16 06:00:00 发布

阅读量1.1w

点赞数 2

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

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

版权

java中用jquery AutoComplete 实现自动补全(一)

最近要做一个搜索功能，为了更好的实现搜索，我们使用jquery autoComplete 插件实现自动补全功能。

首先要使用jquery autoComplete就要先下载 jquery AutoComplete 相关的包,本例子需要三个jar包，如下图所示：

这三个文件，可以从网上下载，也可以从我的资源中下载，都时免费提供的。下载好文件后，将这些文件引入到页面就可以开始实现功能了,准备工作做好后，先写一个简单的例子，如下所示:

<!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">
    //本地数据<数组>
    var data =["java","javaee","jquery","c++","css","html","htm5","bb","ejb","c#"];
	
	//开始
	$().ready(function ()
	{
	     $("#autoComplete").autocomplete(data,
		{
		    minChars: 0,
			max: 5,
			autoFill: true,
			mustMatch: true,
			matchContains: true,
			formatItem: function (data, i, total) {
			  return "<I>" + data[0] + "</I>";
			}, formatMatch: function (data, i, total) {
			  return data[0];
			}, formatResult: function (data) {
			  return data[0];
			}	
			
		});
	});


//搜索数据
       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>

运行后效果如下图所示：

jquery autocomplete( url or data, [options] ) 方法有两个参数,第一个用来填写URL或者数据, jQuery Autocomplete 插件是支持 Ajax 方式调用数据，所以可以填写调用的地址，另外可以直接填写数据，格式为 JavaScript 数组，如我们的例子， autocomplete 的另外一个参数 [options] 是一个可选项，这个参数里面却有很多可配置的参数,下面简单说一下他们各自的用法：