jQuery-ui-autocomplete

jQuery UI Autocomplete是jQuery UI的自动完成组件,支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function等方式来获取数据。

Array数组的简单例子:

	<script type="text/javascript" src="jquery-1.10.2.js"></script>
	<script src="jquery.ui.core.js"></script>
	<script src="jquery.ui.widget.js"></script>
	<script src="jquery.ui.position.js"></script>
	<script src="jquery.ui.autocomplete.js"></script>
	<script type="text/javascript">
		$(function(){
			var projects = [
					"JQuery",
					"JavaScript",
					"HTML",
					"PHP",
					"JS"
			];
			$("#tags").autocomplete({
				source : projects,
			});
		})
	</script>
</head>
<body>
	<div class="box">
		<label for="tags">输入:</label>
		<input id="tags">
	</div>
</body>
</html>

普通数组是没有特殊要求的,可是JSON则要求有label,value这个两个属性

var projects = [
			{
				value: "这是jquery",
				label: "JQuery",
				desc: "NO",
				icon: "jquery_32x32.png"
			},
			{
				value: "这是javascript",
				label: "JavaScript",
				desc: "Yes",
				icon: "javascript_32x32.png"
			},
			{
				value: "这是PHP",
				label: "PHP",
				desc: "Yes && NO",
				icon: "php_32x32.png"
			}
		];
		$("#tags").autocomplete({
			minLength : 0,
			source : projects,
			focus : function(event, ui){
				$("#tags").val(ui.item.label);
				return false;
			},
			select : function (event, ui){
				$("#tags").val(ui.item.label);
        		$("#tags-description").html(ui.item.desc);
        		$("#tags-icon").attr("src", "images/" + ui.item.icon);
        		return false;
			}
		});

<div class="box">
		<label for="tags">输入</label>
		<input id="tags">
		<div id="tags-description"></div>
		<div id="tags-icon"></div>
</div>

上图就是点击选中后对其他标签的修改

在autocompelte中可以通过ui参数去调用json中的键值,同时也能对外部标签(是指#tags绑定autocomplete以外的标签)进行修改

autocomplete常用参数:

source:可以是array、function,也可以是请求地址,就是string

minLength:字符达到minLength时就激活Autocomplete

autoFocus:当autocomplete弹出时,自动选择第一个

delay:延迟多少秒后激活Autocokplete

常用的监听事件:

1.create(event, ui):Autocomplete创建时,可以在此事件中,对外观进行一些控制

2.search(event, ui): 在开始请求之前,可以在此事件中返回false来取消请求

3.open(event, ui):Autocomplete的结果列表弹出时

4.focus(event, ui):Autocomplete的结果列表任意一项获得焦点时,ui.item为获得焦点的项

5.select(event, ui):Autocomplete的结果列表任意一项选中时,ui.item为选中的项

6.close(event, ui):Autocomplete的结果列表关闭时

7.change(event, ui):当值改变时,ui.item为选中的项

Focus 事件

  选项中移动的时候,被指向的选项得到焦点,但是还没有被选中的时候,将会触发这个事件

Select 事件

  当一个项目被选中的时候,将会触发这个事件,默认的处理是使用这个值替换掉输入框中的内容

自定义的显示格式,通过_renderItem方法,自定义提示的显示方式

以下就是autocomplete通过ajax将后台数据获取,最终显示在页面的案列

上面autocomplete的source属性设置是function的函数,function有两个函数:request和response。

request是一个对象,只有一个属性term,它代表输入框的值

response是一个回调函数,只有一个参数,就是后台返回的数据

select函数有默认函数,如果不return false的话,那么默认的函数也会执行

Jquery ui autocomplete的官方手册https://api.jqueryui.com/autocomplete/

时间: 2024-11-03 05:26:47

jQuery-ui-autocomplete的相关文章

可输入自动匹配Select——jquery ui autocomplete

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery UI Autocomplete - Combobox</title> 6 <link rel="stylesheet" href="http://code.jquery.com/ui/1.

solr进阶八:jQuery UI Autocomplete与solr搜索结合

大致的流程: 页面捕获到文字 --> 传到servlet(Controller)层,servlet层调用后台 --> 后台根据servlet层传来的参数进行动态从solr中获取数据 --> solr 数据返回到servlet层,解析 --> 展现到页面上. 在solr里面新建一个core,在MySQL数据库里面新建一个表,从这个表导入数据到solr的core中,具体步骤可以上网查或者看我前面的教程. SQL语句: SET FOREIGN_KEY_CHECKS=0; -- -----

jQuery UI Autocomplete是jQuery UI的自动完成组件

支持的数据源 jQuery UI Autocomplete主要支持字符串Array.JSON两种数据格式. 普通的Array格式没有什么特殊的,如下: ? 1 ["cnblogs","博客园","囧月"] 对于JSON格式的Array,则要求有:label.value属性,如下: ? 1 [{label: "博客园", value: "cnblogs"}, {label: "囧月", v

Jquery ui autocomplete简单api

重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocomplete( "方法名", "参数1", "参数2" ); Autocomplete的方法列表 close() 关闭自动完成显示的菜单. $( "#title" ).autocomplete( "close" );

jquery ui autocomplete ajax返回数据自定义显示

1.body里面的内容 <input type="text" class="inputTxt" id="txtJigou" autocomplete="off"/> 2.引入jquery.ui.min.js和他的样式 3.js代码如下<script type="text/javascript"> $(function(){ $("#txtJigou").autoc

jQuery UI Autocomplete自动补全

项目上用到solr搜索引擎,在输入框输入字符的时候,想做到类似百度的效果,下拉框出现10个建议词条,为此,用上了jQuery UI Autocomplete 做自动补全 jsp页面样例: <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/view

jquery ui autocomplete 实现点击文本框,出现所有查询信息效果

直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="../../themes/base/jqu

jQuery UI Autocomplete示例(一)

今天看到这么个教程,分享给新手学习 AutoComplete 在获取焦点后,随着用户键入的内容,可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择.这可以用作之前输入过的内容也可以用作自动填充相关内容,比如根据城市名,自动填充邮编等.你可以使用本地数据源或是远程数据源,本地数据一般使用小数据集合,比如包含50条记录的通讯录,远程数据源一般为保护大量记录的数据库.基本用法本例为使用AutoComplete的基本用法,通过本地数据源(数组)定义一组语言列表,用户输入字母后,包含该字母的

Jquery Ui AutoComplete自动填写的功能

用到的jquery 和jquery ui 的版本如下: jQuery v1.12.4 jQuery UI - v1.11.0 有部分版本会有一些这样那样的问题,具体原因未深究. jquery 的代码如下 $("#id_customer").autocomplete({ source:function (request,response) { var findResult = []; $.ajax({ url:"/ips/get_customername_list/"

jquery ui autoComplete自动完成

官网:http://jqueryui.com/autocomplete 最简单的形式: var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",  ]; $( "#tags" ).autocomplete({ source: