Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Autocomplete v2 (gallery-ac-widget-v2)

Last Updated: 09/10/10

+ 0 -

Marc

YUI Contributor

See 7 more by this user.

Created: 09/2/10
Project: YUI 3
License: YUI BSD
YUI Version: 3.2.0
Free for use.

In order to use autocomplete you need a data feed that supports: an id, a label and a normalized label (without Ã�ï¿½Ã¯Â¿Â½Ã�ï¿½Ã�Â© and such characters), a resultCount.

A regular expression cache is used to minimize server hits, but this is not requirement. Leave it out if you want to.

Due to a change introduced in yui 3.2.0, the regular expression cache plugin only works on yui 3.2.0. If you want the regular expression cache to work, you will have to edit the source and change Y.Plugin.Cache with Y.Cache and 'cache-plugin' with 'cache'

Tags:
mschipperheyn

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

the selection and hide events are global. So you can subscribe to it like so:
[code]
Y.Global.on("ac:selectedElement",function(data){
handleData(data.id,data);
});

Y.Global.on("ac:hide",function(e){
//do something
});
[/code]

A typical json packet used as input would look like:
[code]
{"result":[{"extraData":[],"id":30,"label":"Barra de SÃ�ï¿½Ã¯Â¿Â½Ã�ï¿½Ã�Â£o Miguel","key":"barra de sao miguel"},{"extraData":[],"id":111,"label":"SÃ�ï¿½Ã¯Â¿Â½Ã�ï¿½Ã�Â£o BrÃ�ï¿½Ã¯Â¿Â½Ã�ï¿½Ã�Â¡s","key":"sao bras"}],"resultCount":359}
[/code]

Code Sample

YUI().use('gallery-ac-widget-v2','node', function(Y) {
   Y.all('input.autocomplete').each(function(node,idx,ctxt){
	createWidget(node);	
   });
   function createWidget(node){
	var autoComp = new Y.ACWidget2({
		ac : node.plug(Y.Plugin.ACPlugin2, {
			queryTemplate : function (q) { return "qry="+ encodeURIComponent(q); },
			dataSource : new Y.DataSource.IO({
				source : '/json/getcities.json?'
			}).plug({fn : Y.Plugin.DataSourceJSONSchema, cfg : {
				schema : { resultListLocator : "result",metaFields:{total:'resultCount'} }
			}}).plug(Y.Plugin.DataSourceRegExCache, {max:25})
		}).ac
		,zIndex:110
		,align: {node:node,points:["tl","bl"]}
 
	});
	autoComp.on('ac:selectedElement',function(data){
		document.getElementById('ac-id').value = data.id;
	});
   }
 
});

Forum Posts

Subject	Author	Date
Availability source	Marc	09/10/10
Re: Availability source	Marc	09/13/10