JQuery UI Autocomplete自动补全组件(仿百度、谷歌搜寻自动输入提示功能)

JQuery UI 是以 JQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件，这些控件主要包括：Accordion,Autocomplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，其中Autocomplete能够非常容易的帮我们实现类似于百度搜索的智能提示功能。最新JQuery UI可以从JQuery UI官网下载获得。

官网及示例：http://jqueryui.com/autocomplete/

效果图：

入门实例：

首先引入依赖库：

css/jquery-ui.css
css/style.css
js/jquery-1.9.1.js
js/jquery-ui.js

添加个简单的输入框：

<body>
    <input id="autocomplete" >
  </body>

创建：

$(function() {
	var availableTags = [
	             		"ActionScript",
	             		"AppleScript",
	             		"Asp",
	             		"BASIC",
	             		"C",
	             		"C++",
	             		"Clojure",
	             		"COBOL",
	             		"ColdFusion",
	             		"Erlang",
	             		"Fortran",
	             		"Groovy",
	             		"Haskell",
	             		"Java",
	             		"JavaScript",
	             		"Lisp",
	             		"Perl",
	             		"PHP",
	             		"Python",
	             		"Ruby",
	             		"Scala",
	             		"Scheme"
	             	];
		$( "#autocomplete" ).autocomplete({
			source:  availableTags
		});
	});

好了，ok。创建完毕，很简单。

核心句是:$( "#autocomplete" ).autocomplete({....}), 即：将上面的文本框设置为自动补全组件(autocomplete )，同时可以设置自定义参数。其中source参数必须设置，它设置了检索的数据来源，即：当我们在文本框中输入后，组件会在source指定的数据源中模糊检索。autocomplete 提供了丰富且灵活的数据源，如下：

有以下几种数据源：

1、string数组参数，格式：[ "Choice1", "Choice2" ]

如上面示例中的方式。

2、object数组参数，格式[ { label: "Choice1", value: "value1" }, ... ]

其中label是在匹配菜单中显示项的值，而value，是选中此匹配项后，append到<input>中的真实值（input的value属性值）

如：

$( "#autocomplete" ).autocomplete({source:[ { label: "ActionScript", value: "ActionScript" },{ label: "AppleScript", value: "AppleScript" }]});

3、string参数

如果是string参数，则是指定一个远程的数据源，然后当<input>中有输入变化，即change事件后，会自动将输入的内容，以GET方式发送到远程数据源，其中输入内容以term参数保存；

例如，参数为http://remoteSource，那么在用户输入abc后，将会发送一个GET请求如http://remoteSource?term=abc

返回的结果必须以json格式，数据格式如上面1、2描述

例如：

$( "#autocomplete" ).autocomplete({
			source:"index2.jsp"
        });

后台index2.jsp 可如下写：

<body>
<%

  String term = request.getParameter("term");
  response.setContentType("text/plain;charset=UTF-8");  
  response.getWriter().write("[ \"choice1\", \"choice2\" ]");
  response.getWriter().flush();
  response.getWriter().close();
 %>
</body>

4、Function(request, response)，最具有灵活性的一种方式，可用于返回任何数据源方式来实现自动完成，其中包含两个参数request，response通过request.term 来获取用户输入的值,通过response(argument)来对获取的数据源进行显示。

$ ( ".selector" ). autocomplete ({
          source: function(request,response){
            //获取用户输入
            var term = request.term;
            //根据自定义方式从服务器获取数据
            ...
            //还可以自己解析数据
            ..
            //最后把数据按照前面1、2描述的格式，放到response中
            response(data);
          }
        });

例如：

$( "#autocomplete" ).autocomplete({
			source: function( request, response ) {
			    var term = request.term;
			    $.ajax({
				    url: "index3.jsp",
				    dataType: "json",
				    data: {"term": term},
				    success: function( data ) {
					    response(data);
					}
				})
			}
        });

后台index3.jsp可如下写：

<body>
<%

  String term = request.getParameter("term");
  response.setContentType("text/plain;charset=UTF-8");  
  response.getWriter().write("[{ \"label\": \"C# Language\", \"value\": \"C#\" },{ \"label\": \"C++ Language\", \"value\": \"C++\" }]");
  response.getWriter().flush();
  response.getWriter().close();
  System.out.println(term);
 %>
</body>

功能支持：

此自动补全功能，支持<input><textarea>或者有contenteditable 属性的标签

键盘操作：

1、上下键可以选择匹配项

2、esc建可以关闭匹配菜单

3、enter建可以选择当前选中的匹配项

4、pageup pagedown 可以操作匹配菜单中的滚动条

CSS：

1、ui-autocomplete：匹配菜单中匹配项的css属性

2、ui-autocomplete-input：输入框的属性

除了设置source参数外，还提供了以下可选的参数：

appendTo：

指定匹配菜单中的匹配项，将匹配内容补填到哪个标签；一般都是默认补填到<input>标签中

初始化时，用如下方式设置：

$( ".selector" ).autocomplete({ appendTo: "#someElem" });

autoFocus:

默认为false，设置成true时，则匹配菜单中的第一个匹配项，会默认被选中，效果如下图：

delay

在按键后执行搜索的延时，默认为300ms。

$( ".selector" ).autocomplete({ delay: 500 });

disabled

是否禁用autocomplete 组件，默认为false。

$( ".selector" ).autocomplete({ disabled: true });

minLength

触发自动完成功能需要输入的最小字符数量。

$( ".selector" ).autocomplete({ minLength: 0 });

position

设置匹配菜单的相对位置

默认值{ my: "left top", at: "left bottom", collision: "none" }

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });

其中，"my" 代表匹配菜单，"at"代表输入 input文本框，简单的说就是设置二者的重合点，即默认设置是：匹配菜单的左上角与input文本框的左下角重合，效果如上图所示。

事件

change( event, ui )

当input文本框失去焦点，并且被选中的项改变时，触发该事件。

$( ".selector" ).autocomplete({
  change: function( event, ui ) {}
});

被选中的项被保存在ui的item对象中，如果没有任何项被选中则ui的item对象为null。

close( event, ui )

当匹配菜单隐藏时，触发该事件。

$( ".selector" ).autocomplete({
  close: function( event, ui ) {}
});

注：close事件与change事件不能一同使用。

create( event, ui )

当autocomplete 组件创建时触发

$( ".selector" ).autocomplete({
  create: function( event, ui ) {}
});

focus( event, ui )

当鼠标或焦点移到匹配菜单的另一个item(未被选中的)时触发，

select( event, ui )

当一个menu项被选择后，触发该事件。同时会将被选择的项放到ui的item对象中。

$( ".selector" ).autocomplete({
  select: function( event, ui ) {}
});

search( event, ui )

在开始请求之前发生，如果在search中返回false，则当前的检索请求将被取消。此事件发生在minLength 和 delay 后。

response( event, ui )

在搜索完成后匹配菜单显示前发生，可以在此事件中对显示菜单进行处理，修改搜索到的匹配菜单。搜索到的菜单列表封装在ui.content中。

在上面代码的基础上加个response事件，例如：

$( "#autocomplete" ).autocomplete({
			source: function( request, response ) {
			    var term = request.term;
			    $.ajax({
				    url: "index3.jsp",
				    dataType: "json",
				    data: {"term": term},
				    success: function( data ) {
					    response(data);
					}
				})
			},
			response: function( event, ui ) {
				$.each(ui.content, function(index, item){
					item.label = item.label + "0";
					item.value = item.value + "0";
					
				})				
			}
        });

简单的将每个菜单项的末尾加个"0"，来演示response可以对搜索到的匹配菜单进行修改。

更多的详细使用，可查看官方文档：http://api.jqueryui.com/autocomplete

事件

close( event, ui )

create( event, ui )

+友情链接