summaryrefslogtreecommitdiffstats
path: root/web/html/home.php
diff options
context:
space:
mode:
authorMarcel Korpel <marcel.lists@gmail.com>2012-12-23 21:23:45 +0000
committerLukas Fleischer <archlinux@cryptocrack.de>2013-01-19 12:17:55 +0100
commitb004333eadb9a4db57592bb501b28edced708943 (patch)
treeb4e54f9e6f5bd44f2f1089d9aa1f27d78e9d8c08 /web/html/home.php
parentb8f07c4c45a27fddb7f2a9c1d88b57ec9d4f2267 (diff)
downloadaurweb-b004333eadb9a4db57592bb501b28edced708943.tar.xz
Implemented typeahead suggest
Use Twitter Bootstrap JavaScript framework for typeahead support. Add a new "suggest" JSON method, which returns the first 20 packages that match the beginning characters of a query. canyonknight: Link format change, commit message Signed-off-by: Lukas Fleischer <archlinux@cryptocrack.de>
Diffstat (limited to 'web/html/home.php')
-rw-r--r--web/html/home.php19
1 files changed, 18 insertions, 1 deletions
diff --git a/web/html/home.php b/web/html/home.php
index 4e489ba..0b51d55 100644
--- a/web/html/home.php
+++ b/web/html/home.php
@@ -95,7 +95,7 @@ $dbh = db_connect();
<fieldset>
<label for="pkgsearch-field"><?= __('Package Search') ?>:</label>
<input type="hidden" name="O" value="0" />
- <input type="text" name="K" size="30" value="<?php if (isset($_REQUEST["K"])) { print stripslashes(trim(htmlspecialchars($_REQUEST["K"], ENT_QUOTES))); } ?>" maxlength="35" />
+ <input id="pkgsearch-field" type="text" name="K" size="30" value="<?php if (isset($_REQUEST["K"])) { print stripslashes(trim(htmlspecialchars($_REQUEST["K"], ENT_QUOTES))); } ?>" maxlength="35" />
</fieldset>
</form>
</div>
@@ -107,5 +107,22 @@ $dbh = db_connect();
</div>
</div>
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+<script type="text/javascript" src="/js/bootstrap-typeahead.js"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+ $('#pkgsearch-field').typeahead({
+ source: function(query, callback) {
+ $.getJSON('<?= get_uri('/rpc'); ?>', {type: "suggest", arg: query}, function(data) {
+ callback(data);
+ });
+ },
+ matcher: function(item) { return true; },
+ sorter: function(items) { return items; },
+ menu: '<ul class="pkgsearch-typeahead"></ul>',
+ items: 20
+ }).attr('autocomplete', 'off');
+});
+</script>
<?php
html_footer(AUR_VERSION);