YUI AutoComplete Example Problem

Question

Hi. I was hunting for an implementations of YUI AutoComplete and I came across this script from the site asklaila.com -

<script type="text/JavaScript">
    YAHOO.example.ACJson = new function() {
        this.oACDS = new YAHOO.widget.DS_XHR("/AutoComplete.do", 
            ["Suggestions[0].Results","Name"]);

        this.oACDS.queryMatchContains = true;
        this.oACDS.scriptQueryAppend = "city=Mysore"; // Needed for YWS
        function fnCallback(e, args) {
            document.searchForm.where.focus();
            acSelected = true;
            return false;
        }

        this.oAutoComp = new YAHOO.widget.AutoComplete('what','whatContainer', this.oACDS);
        this.oAutoComp.itemSelectEvent.subscribe(fnCallback);
        this.oAutoComp.formatResult = function (oResultItem,sQuery) {
            return oResultItem[0];
        }

        this.oAutoComp.queryDelay = 0;
        this.oAutoComp.useIFrame = true; 
        this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
        this.oAutoComp.minQueryLength = 2;
        this.oAutoComp.autoHighlight = false;
        this.oAutoComp.textboxFocusEvent.subscribe(function() {
            this.oAutoComp.sendQuery("");
        });

        this.oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
            var pos = YAHOO.util.Dom.getXY(oTextbox);
            pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
            YAHOO.util.Dom.setXY(oContainer,pos);
            return true;
        };
    }
</script>

It is implenting the YUI AutoComplete Dropdown. What I want to understand is what this

this.oACDS = new YAHOO.widget.DS_XHR("/AutoComplete.do", ["Suggestions[0].Results","Name"]);

does and its effects on code.

Answer 1

I was hunting for implementations of YUI Autocomplete and I came across this script...

Why not take a look at YUI AutoComplete page for in-depth examples.

Yahoo! UI Library: AutoComplete

Answer 2

That's using an older version of YUI, but it is setting up a DataSource for the autocomplete to read from. This particular DataSource uses XHR to request information from the server to populate the autocomplete field.

"Autocomplete.do"

Is a relative URL that is being queried by the DataSource every time the autocomplete fires while the user is typing.

["Suggestions[0].Results","Name"]

Is the responseSchema that tells the DataSource how to parse the results from the request to the URL. It needs to know how to parse the data so that it can show the proper results.

Answer 3

this.oACDS = new YAHOO.widget.DS_XHR("/AutoComplete.do", ["Suggestions[0].Results","Name"]);

On every key press, it fetches a json response from the server, and uses it to populate the autocomplete dropdown. The json contains names to display only at this node, "Suggestions[0].Results" in the "name" field.

If you have any trouble, ask ahead. I wrote that piece of code for asklaila.com