sketch-2.html revision f6b48567c27f8888e647b706ccf3a46d7fb303ba
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
clear:left;
white-space:pre;
display:block;
font-family:monospace;
background:#eef;
}
script::before, script::after {
content:"<script>";
}
script::after {
content:"</script>";
}
script[src]::before {
content:"<script src=\"" attr(src) "\">";
white-space:nowrap;
}
script[src] {
background:#fff;
}
</style>
<title>autocomplete exploration</title>
</head>
<body class="yui-skin-sam">
<form>
<label for="ac">
INPUT!
</label>
<input name="ac" id="ac" type="text">
<input type="submit" id="log" value="Show times">
</form>
<script class="mine">
// watch typing events, log "fetch" signals
YUI({
debug: true,
base: "/build/",
filter: 'raw'
}).use('node', 'console', 'console-filters', "datasource", 'log', 'event-key', function (Y) {
new Y.Console({
plugins : [ Y.Plugin.ConsoleFilters ],
newestOnTop : false,
useBrowserConsole : false
}).render();
var myAC = Y.one("#ac");
var myDS = new Y.DataSource.Get({
source : "http://query.yahooapis.com/v1/public/yql?" +
"format=json&" +
"env=http%3A%2F%2Fdatatables.org%2Falltables.env&",
scriptCallbackParam : "callback"
});
var timeout = 0;
function doSomething () {
var query = myAC.get("value").replace('"', '\\"');
myDS.sendRequest("q=" + encodeURIComponent(
"select * from search.suggest where query =\"" + query + "\" limit 10"
), handleResults)
};
function handleResults (res) {
console.log(res);
};
myAC.on("keydown", function (e) {
window.clearTimeout(timeout);
timeout = window.setTimeout(doSomething, 200);
});
});
</script>
</body>
</html>