Autocomplete with a text/html response

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 10 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Oliver

Username: dontcallmeninja
Joined: Tue Sep 21, 2010 2:48 pm
Posts: 11

Tags:

Autocomplete with a text/html response

Posted: Sun Sep 04, 2011 6:11 am

+0-

Hi,

I tried to get the autocomplete widget to work, but somehow I can't figure out how to simply receive an html string (i.e. text; -> using DataSource) which can be appended to the results container. And all the examples I saw work with JSON, YQL etc.

This is the code:

Code:

var ds = new Y.DataSource.IO({
    source: '/my/source/',         
});

Y.one('#searchField').plug(Y.Plugin.AutoComplete, {         
    requestTemplate: '?query={query}',
    source: ds,
    minQueryLength: 3,
    resultHighlighter: 'phraseMatch'
});

Would be thankful for any hint.

Alberto Santini

YUI Contributor

Username: icebox
Joined: Wed Sep 16, 2009 3:16 am
Posts: 1067
Location: Milan, Italy
Twitter: santinialberto
GitHub: albertosantini
Gists: albertosantini
IRC: icebox

Tags:

Re: Autocomplete with a text/html response

Posted: Sun Sep 04, 2011 8:33 am

+0-

Hello Oliver.

I suppose the solution depends on the schema of the string.
You may plug a datasource text schema.

For instance,

Code:

    ds.plug({fn: Y.Plugin.DataSourceTextSchema, cfg: {
        schema: {
           resultDelimiter: "\n",
           fieldDelimiter: ",",
           resultFields: [ 'fruit', 'color' ]
        }
    }});

A working example: http://jsfiddle.net/sRHvs/

Hope that helps,
IceBox

Oliver

Username: dontcallmeninja
Joined: Tue Sep 21, 2010 2:48 pm
Posts: 11

Re: Autocomplete with a text/html response

Posted: Sun Sep 04, 2011 12:17 pm

+0-

Thanks a lot, Alberto. It already looks better now. I'll play around with it a bit more...

Oliver

Username: dontcallmeninja
Joined: Tue Sep 21, 2010 2:48 pm
Posts: 11

Tags:

Re: Autocomplete with a text/html response

Posted: Mon Sep 05, 2011 10:08 am

+0-

Alberto, the thing now is that the HTML I get as a response is being put in quotes by DataSourceTextSchema and thus not interpreted as HTML by the browser. Can I prevent DataSourceTextSchema from doing this (couldn't find any information on that)?

Thanks!

Alberto Santini

YUI Contributor

Username: icebox
Joined: Wed Sep 16, 2009 3:16 am
Posts: 1067
Location: Milan, Italy
Twitter: santinialberto
GitHub: albertosantini
Gists: albertosantini
IRC: icebox

Tags:

Re: Autocomplete with a text/html response

Posted: Mon Sep 05, 2011 11:50 am

+0-

Hello Oliver.

I am sorry: I missed the response was an html string.

You may give a look at xml data schema example:
http://yuilibrary.com/yui/docs/datasche ... table.html

Generally speaking, you may give a look at data schema user guide:
http://yuilibrary.com/yui/docs/dataschema/

Hope that helps,
IceBox

Oliver

Username: dontcallmeninja
Joined: Tue Sep 21, 2010 2:48 pm
Posts: 11

Tags:

Re: Autocomplete with a text/html response

Posted: Mon Sep 05, 2011 12:51 pm

+0-

OK, I think we're getting close

Sorry for not finding this information myself, even though I really tried...

Many thanks!

Oliver

Username: dontcallmeninja
Joined: Tue Sep 21, 2010 2:48 pm
Posts: 11

Tags:

Re: Autocomplete with a text/html response

Posted: Tue Sep 06, 2011 12:38 pm

+0-

Sorry Alberto, but haven't managed to get this to work.

What I do now is the following:

Code:

YUI().use('autocomplete', 'datasource', function (Y) {

var ds = new Y.DataSource.IO({
    source: '/my/source/',         
});
              
ds.plug({fn: Y.Plugin.DataSourceXMLSchema, cfg: {
    schema: {         
        resultListLocator: "table",
        resultFields: [
            {key:"img", locator:"tr[1]/td[1]"},
            {key:"link", locator:"tr[1]/td[2]"}
        ]
    }
}});

Y.one('#searchField').plug(Y.Plugin.AutoComplete, {         
    requestTemplate: '?query={query}',
    source: ds,
    minQueryLength: 3,
});

});

So in my case each record is in a table (with one row and two columns), not in a table row as in the examples. It's quite similar to what I tried with DataSourceTextSchema, but now nothing appears in the results container...

Alberto Santini

YUI Contributor

Username: icebox
Joined: Wed Sep 16, 2009 3:16 am
Posts: 1067
Location: Milan, Italy
Twitter: santinialberto
GitHub: albertosantini
Gists: albertosantini
IRC: icebox

Re: Autocomplete with a text/html response

Posted: Tue Sep 06, 2011 12:53 pm

+0-

Hello Oliver.

Any example of your response string?

Regards,
IceBox

Oliver

Username: dontcallmeninja
Joined: Tue Sep 21, 2010 2:48 pm
Posts: 11

Re: Autocomplete with a text/html response

Posted: Tue Sep 06, 2011 1:42 pm

+0-

For a response with 3 results, it would look something like this:

<table><tr><td><img src="img1.jpg" /></td><td valign="top"><a href="link1.html">Link 1</a></td></tr><tr><td></td><td></td></tr></table>
<table><tr><td><img src="img2.jpg" /></td><td valign="top"><a href="link2.html">Link 2</a></td></tr><tr><td></td><td></td></tr></table>
<table><tr><td><img src="img3.jpg" /></td><td valign="top"><a href="link3.html">Link 3</a></td></tr><tr><td></td><td></td></tr></table>

(the second, empty tr shouldn't be there, but for some reason it is at the moment)

Alberto Santini

YUI Contributor

Username: icebox
Joined: Wed Sep 16, 2009 3:16 am
Posts: 1067
Location: Milan, Italy
Twitter: santinialberto
GitHub: albertosantini
Gists: albertosantini
IRC: icebox

Re: Autocomplete with a text/html response

Posted: Wed Sep 07, 2011 12:28 am

+0-

Hello Oliver.

The following schema should do the job:

Code:

    schema = {
        resultListLocator: "tr",
        resultFields: [
            {key: "img", locator: "td[1]"},
            {key: "link", locator: "td[2]"}
        ]
    };

You need to fill a node with the response string (data_in):

Code:

    tbody = document.createElement("tbody"),
    tbodyContainer = document.createDocumentFragment().appendChild(tbody);
    tbodyContainer.innerHTML= data_in;

A working example: http://jsfiddle.net/m2hwG/6/

Hope that helps,
IceBox

P.S.: The autocomplete example updated: http://jsfiddle.net/sRHvs/4/

Page 1 of 1

[ 10 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum