diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/autocomplete/ac-yql.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/autocomplete/ac-yql.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,200 @@ + + + + + Example: Remote Data via YQL + + + + + + + + + + +
+
+

+
+ + +

Example: Remote Data via YQL

+
+
+
+
+ +
+

+This example demonstrates how to provide autocomplete suggestions using a YQL query as the source. In this case, we're using a custom search.suggest YQL table to provide suggestions based on popular Yahoo! Search queries. +

+
+ +
+
+
+ +
+ + + +
+ +

HTML

+

+Note: be sure to add the yui3-skin-sam classname to the +page's <body> element or to a parent element of the widget in order to apply +the default CSS skin. See Understanding Skinning. +

+
<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
+  <label for="ac-input">Search:</label><br>
+  <input id="ac-input" type="text">
+</div>
+ + +

JavaScript

+ +
YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
+  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
+    resultHighlighter: 'phraseMatch',
+    source: 'select * from search.suggest where query="{query}"',
+    yqlEnv: 'http://pieisgood.org/yql/tables.env'
+  });
+});
+ + +

Complete Example Source

+ +
<div id="demo" class="yui3-skin-sam"> <!-- You need this skin class -->
+  <label for="ac-input">Search:</label><br>
+  <input id="ac-input" type="text">
+</div>
+
+<script>
+YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
+  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
+    resultHighlighter: 'phraseMatch',
+    source: 'select * from search.suggest where query="{query}"',
+    yqlEnv: 'http://pieisgood.org/yql/tables.env'
+  });
+});
+</script>
+ +
+
+
+ +
+
+ + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+
+
+ + + + + + + + + + +