YUI3 autocomplete

I think I would like to make the switch from Scriptaculous to YUI. So, the first thing I am trying to do i开发者_Python百科s an autocomplete feature on the front page of my application demo. Every single search I do for this, refers me to YUI2 examples and instructions. These use YAHOO objects instead of YUI objects, and I just don't trust that this is the right way to do it.

If I was already familiar with 2.x, it may not be too hard, but I'm coming from a different set of libraries. Does anyone have instructions how to implement an autocomplete feature using YUI 3? Any help would be appreciated.

Thanks, Dave

The official YUI 3 AutoComplete widget was released in YUI 3.3.0: http://developer.yahoo.com/yui/3/autocomplete/

Some initial work was done on AutoComplete in YUI 3. Due to resource issues, it was moved to the Gallery for the time being so implementers would have access to it until it is fully fleshed out, documented, and examples written for official release.

http://yuilibrary.com/gallery/show/autocomplete

A lot of the widgets haven't been ported from 2.x to 3.x yet. If you're really opposed to using YUI 2.x, you could probably port the widget yourself; YUI is on GitHub.

This is example of implementing YUI3 AutoComplete (with a bonus implementation of GAE autocomplete services for both XHR and JSONP style URLs).

Here's an example from Apache Roller using Y.DataSource.IO to retrieve data using JSON (I also include a testing line "ds2" using a local array, that I've since removed from the code.) As I understand, Y.DataSource.Get should be used instead if you're using JSONP.

This autocomplete is for the "tags" field that people use to type in 0 or more tags (topics) for a blog entry. It queries previously used tags for other blog entries as suggestions for the user, based on the user input (as the user types in more letters "b..a... etc., fewer items appear.) If helpful for understanding the sample, here's a sample of the JSON returned:

{ "prefix": "ba",
  "weblog": "gmazza",
  "tagcounts": [
   { "tag" : "bahamas", "count" : 1 }, 
   { "tag" : "baltimore", "count" : 3 }, 
   { "tag" : "baseball", "count" : 3 }]
}

My recommendation is to first get the autocomplete working with a local hardcoded array as the source (my ds2 in the example above.) Once done, then focus on getting the datasource operative and having the autocomplete correctly read from it instead of the array.