← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/autocomplete/ac-yql.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/docs/autocomplete/ac-yql.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Remote Data via YQL</title>
6
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:400,700">
7
 
    <link rel="stylesheet" href="../../build/cssgrids/grids-min.css">
8
 
    <link rel="stylesheet" href="../assets/css/main.css">
9
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
10
 
    <script src="../../build/yui/yui-min.js"></script>
11
 
</head>
12
 
<body>
13
 
 
14
 
<div id="doc">
15
 
    <h1>Example: Remote Data via YQL</h1>
16
 
 
17
 
    
18
 
 
19
 
    <div class="yui3-g">
20
 
        <div class="yui3-u-3-4">
21
 
            <div id="main">
22
 
                <div class="content"><style scoped>
23
 
#ac-input { width: 250px; }
24
 
</style>
25
 
 
26
 
<div class="intro">
27
 
<p>
28
 
This example demonstrates how to provide autocomplete suggestions using a YQL query as the source. In this case, we're using a custom <a href="http://developer.yahoo.com/yql/console/?q=select%20*%20from%20search.suggest%20where%20query%3D%22yui%20autocomplete%22&amp;env=http%3A%2F%2Fpieisgood.org%2Fyql%2Ftables.env"><code>search.suggest</code> YQL table</a> to provide suggestions based on popular Yahoo! Search queries.
29
 
</p>
30
 
</div>
31
 
 
32
 
<div class="example">
33
 
    <div id="demo" class="yui3-skin-sam">
34
 
  <label for="ac-input">Search:</label><br>
35
 
  <input id="ac-input" type="text">
36
 
</div>
37
 
 
38
 
<script>
39
 
YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
40
 
  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
41
 
    resultHighlighter: 'phraseMatch',
42
 
    source: 'select * from search.suggest where query="{query}"',
43
 
    yqlEnv: 'http://pieisgood.org/yql/tables.env'
44
 
  });
45
 
});
46
 
</script>
47
 
 
48
 
</div>
49
 
 
50
 
<h2>HTML</h2>
51
 
 
52
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
53
 
  &lt;label for=&quot;ac-input&quot;&gt;Search:&lt;&#x2F;label&gt;&lt;br&gt;
54
 
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
55
 
&lt;&#x2F;div&gt;</pre>
56
 
 
57
 
 
58
 
<h2>JavaScript</h2>
59
 
 
60
 
<pre class="code prettyprint">YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
61
 
  Y.one(&#x27;#ac-input&#x27;).plug(Y.Plugin.AutoComplete, {
62
 
    resultHighlighter: &#x27;phraseMatch&#x27;,
63
 
    source: &#x27;select * from search.suggest where query=&quot;{query}&quot;&#x27;,
64
 
    yqlEnv: &#x27;http:&#x2F;&#x2F;pieisgood.org&#x2F;yql&#x2F;tables.env&#x27;
65
 
  });
66
 
});</pre>
67
 
 
68
 
 
69
 
<h2>Complete Example Source</h2>
70
 
 
71
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
72
 
  &lt;label for=&quot;ac-input&quot;&gt;Search:&lt;&#x2F;label&gt;&lt;br&gt;
73
 
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
74
 
&lt;&#x2F;div&gt;
75
 
 
76
 
&lt;script&gt;
77
 
YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
78
 
  Y.one(&#x27;#ac-input&#x27;).plug(Y.Plugin.AutoComplete, {
79
 
    resultHighlighter: &#x27;phraseMatch&#x27;,
80
 
    source: &#x27;select * from search.suggest where query=&quot;{query}&quot;&#x27;,
81
 
    yqlEnv: &#x27;http:&#x2F;&#x2F;pieisgood.org&#x2F;yql&#x2F;tables.env&#x27;
82
 
  });
83
 
});
84
 
&lt;&#x2F;script&gt;</pre>
85
 
 
86
 
</div>
87
 
            </div>
88
 
        </div>
89
 
 
90
 
        <div class="yui3-u-1-4">
91
 
            <div class="sidebar">
92
 
                
93
 
 
94
 
                
95
 
                    <div class="sidebox">
96
 
                        <div class="hd">
97
 
                            <h2 class="no-toc">Examples</h2>
98
 
                        </div>
99
 
 
100
 
                        <div class="bd">
101
 
                            <ul class="examples">
102
 
                                
103
 
                                    
104
 
                                        <li data-description="How to provide autocomplete suggestions from a local array.">
105
 
                                            <a href="ac-local.html">Basic Local Data</a>
106
 
                                        </li>
107
 
                                    
108
 
                                
109
 
                                    
110
 
                                        <li data-description="How to provide autocomplete suggestions using a remote JSONP source.">
111
 
                                            <a href="ac-jsonp.html">Remote Data via JSONP</a>
112
 
                                        </li>
113
 
                                    
114
 
                                
115
 
                                    
116
 
                                        <li data-description="How to provide autocomplete suggestions using a YQL query source.">
117
 
                                            <a href="ac-yql.html">Remote Data via YQL</a>
118
 
                                        </li>
119
 
                                    
120
 
                                
121
 
                                    
122
 
                                        <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
123
 
                                            <a href="ac-datasource.html">Remote Data via DataSource</a>
124
 
                                        </li>
125
 
                                    
126
 
                                
127
 
                                    
128
 
                                        <li data-description="How to implement delimited tag completion.">
129
 
                                            <a href="ac-tagging.html">Tag Completion Using Query Delimiters</a>
130
 
                                        </li>
131
 
                                    
132
 
                                
133
 
                                    
134
 
                                        <li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.">
135
 
                                            <a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a>
136
 
                                        </li>
137
 
                                    
138
 
                                
139
 
                                    
140
 
                                        <li data-description="How to use autocomplete-base to filter a set of existing items on a page.">
141
 
                                            <a href="ac-filter.html">Filter a Set of Existing Items on a Page</a>
142
 
                                        </li>
143
 
                                    
144
 
                                
145
 
                            </ul>
146
 
                        </div>
147
 
                    </div>
148
 
                
149
 
 
150
 
                
151
 
            </div>
152
 
        </div>
153
 
    </div>
154
 
</div>
155
 
 
156
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
157
 
<script>prettyPrint();</script>
158
 
 
159
 
</body>
160
 
</html>