Mercurial > hip
changeset 1:a31bdc4de955
Added autocomplete popup and querysource class
| author | Atul Varma <varmaa@toolness.com> |
|---|---|
| date | Fri, 09 May 2008 16:48:45 -0700 |
| parents | 9e6054e41bdc |
| children | 7c040d675c3c |
| files | hip.css hip.html hip.js |
| diffstat | 3 files changed, 51 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/hip.css Fri May 09 13:53:40 2008 -0700 +++ b/hip.css Fri May 09 16:48:45 2008 -0700 @@ -4,3 +4,10 @@ font: 24pt Helvetica; padding: 4px; } + +#autocomplete-popup { + display: none; + border: 1px solid #000000; + font: 14pt Helvetica; + padding: 4px; +}
--- a/hip.html Fri May 09 13:53:40 2008 -0700 +++ b/hip.html Fri May 09 16:48:45 2008 -0700 @@ -9,6 +9,7 @@ </head> <body> <input id="search-box" type="text" size="40" /> + <div id="autocomplete-popup"></div> </body> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="hip.js"></script>
--- a/hip.js Fri May 09 13:53:40 2008 -0700 +++ b/hip.js Fri May 09 16:48:45 2008 -0700 @@ -1,3 +1,46 @@ +Array.prototype.tagify = function(tagName) { + var result = ""; + + for (var i = 0; i < this.length; i++) { + result += ("<" + tagName + ">" + this[i] + + "</" + tagName + ">" ); + } + return result; +} + +function QuerySource() { + var self = this; + + var methods = { + getSuggestions : function(query, callback) { + callback([query + " suggestion 1", + query + " suggestion 2"]); + } + }; + + for (name in methods) { + this[name] = methods[name]; + } +} + +var gQs = new QuerySource(); + +function searchBoxQuery( event ) { + gQs.getSuggestions( + event.target.value, + function(suggestions) { + var ac = $("#autocomplete-popup"); + ac.html( suggestions.tagify("div") ); + ac.show(); + } + ); +} + $(document).ready( function() { $("#search-box").focus(); + $("#search-box").keyup( searchBoxQuery ); + $("#autocomplete-popup").css( + "width", + $("#search-box").css("width") + ); });