CODEWITHSUNDEEP
autocompleteyuiwidget
Anirudh Goel
Anirudh Goel

Reputation: 4721

YUI AutoComplete Example Problem

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.

Upvotes: 0

Views: 3354

Answers (3)

Anuj Rathi
Anuj Rathi

Reputation:

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

Upvotes: 0

Tivac
Tivac

Reputation: 2573

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.

Upvotes: 1

Kirtan
Kirtan

Reputation: 21695

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

Upvotes: 0

Related Questions