Use the following code to create a basic inputEx Autocomplete.
var field = inputEx({
type: "autocomplete",
parentEl: 'container1',
label: 'Search US state',
// Format the hidden value (value returned by the form)
returnValue: function(oResultItem) {
return oResultItem.value;
},
autoComp: {// options of the YUI3 autocompleter (see http://developer.yahoo.com/yui/3/autocomplete/#config)
minQueryLength: 2,
maxResults: 50,
resultTextLocator: 'label',
source:
[{label: "Massachusets", value: "MA"},
{label: "state2", value: 2},
{label: "state3", value:3}]
}
});
Y.Node.create("").appendTo('#container1').on( 'click', function() {
alert( field.getValue() );
});
field.on("updated", function(value) {
Y.one('#container1').append("Updated at "+(new Date())+" with value '"+value+"'");
});
Uses the del.icio.us json API to search within posts
// Example 2: Delicious autocompleter
// Delicious DataSource using a JSFunction
// Delicious.posts is set by the http://feeds.delicious.com/feeds/json/neyric?count=100 script included in the page
var deliciousAC = new Y.inputEx.AutoComplete({
label: 'Search my delicious bookmarks',
description: 'Try "javascript" or "rails"',
parentEl: 'container2',
name: 'chosen_url',
// Format the hidden value (value returned by the form)
returnValue: function(oResultItem) {
var post = oResultItem[1];
return post.u;
},
// Autocompleter options
autoComp: {
source: new Y.DataSource.Function({
source: function(sQuery) {
if (!sQuery || sQuery.length == 0) {
return false;
}
var query = sQuery.toLowerCase();
var aResults = [];
for(var i = 0 ; i != Delicious.posts.length-1 ; i++) {
var post = Delicious.posts[i];
var desc = post.d.toLowerCase();
if( desc.indexOf(query) != -1) {
aResults.push(post);
}
}
return aResults;
}
}),
forceSelection: true,
minQueryLength: 2,
maxResultsDisplayed: 50,
resultFormatter: function(sQuery, results) {
return Y.Array.map(results, function (result) {
console.log("format", result);
var post = result.raw;
// NOTE: we use String.fromCharCode(60) and String.fromCharCode(62) for tags
return String.fromCharCode(60)+'a href="'+post.u+'" target="_new"'+
String.fromCharCode(62)+'visit'+String.fromCharCode(60)+'/a'+String.fromCharCode(62)+
' '+String.fromCharCode(60)+'span target="_new"'+String.fromCharCode(62)+post.d+
String.fromCharCode(60)+'/span'+String.fromCharCode(62);
});
}
}
});
Y.Node.create("").appendTo('#container2').on('click', function() {
alert( deliciousAC.getValue() );
});