Add typeahead suggest to the merge request form

Add the typeahead implementation we already use for the package search
to the merge target text field. Instead of suggesting packages, suggest
package base names.

Signed-off-by: Lukas Fleischer <archlinux@cryptocrack.de>

3 files changed, 56 insertions, 2 deletions

diff --git a/web/html/pkgmerge.php b/web/html/pkgmerge.php
index 6a3b3c5..df97a2a 100644
--- a/web/html/pkgmerge.php
+++ b/web/html/pkgmerge.php
@@ -36,6 +36,23 @@ if (has_credential(CRED_PKGBASE_DELETE)): ?>
 			<?php if (isset($_GET['via'])): ?>
 			<input type="hidden" name="via" value="<?= intval($_GET['via']) ?>" />
 			<?php endif; ?>
+			<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.min.js"></script>
+			<script type="text/javascript">
+			$(document).ready(function() {
+				$('#merge_Into').typeahead({
+					source: function(query, callback) {
+						$.getJSON('<?= get_uri('/rpc'); ?>', {type: "suggest-pkgbase", 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>
 			<p><label for="merge_Into" ><?= __("Merge into:") ?></label>
 			<input type="text" id="merge_Into" name="merge_Into" value="<?= isset($_GET['into']) ? $_GET['into'] : '' ?>" /></p>
 			<p><input type="checkbox" name="confirm_Delete" value="1" />
diff --git a/web/lib/aurjson.class.php b/web/lib/aurjson.class.php
index 8187bef..b31143e 100644
--- a/web/lib/aurjson.class.php
+++ b/web/lib/aurjson.class.php
@@ -13,7 +13,8 @@ class AurJSON {
 	private $dbh = false;
 	private $version = 1;
 	private static $exposed_methods = array(
-		'search', 'info', 'multiinfo', 'msearch', 'suggest'
+		'search', 'info', 'multiinfo', 'msearch', 'suggest',
+		'suggest-pkgbase'
 	);
 	private static $fields_v1 = array(
 		'Packages.ID', 'Packages.Name',
@@ -74,7 +75,8 @@ class AurJSON {
 
 		$this->dbh = DB::connect();
 
-		$json = call_user_func(array(&$this, $http_data['type']), $http_data['arg']);
+		$type = str_replace('-', '_', $http_data['type']);
+		$json = call_user_func(array(&$this, $type), $http_data['arg']);
 
 		$etag = md5($json);
 		header("Etag: \"$etag\"");
@@ -404,5 +406,27 @@ class AurJSON {
 
 		return json_encode($result_array);
 	}
+
+	/*
+	 * Get all package base names that start with $search.
+	 *
+	 * @param string $search Search string.
+	 *
+	 * @return string The JSON formatted response data.
+	 */
+	private function suggest_pkgbase($search) {
+		$query = 'SELECT Name FROM PackageBases WHERE Name LIKE ' .
+			$this->dbh->quote(addcslashes($search, '%_') . '%') .
+			' ORDER BY Name ASC LIMIT 20';
+
+		$result = $this->dbh->query($query);
+		$result_array = array();
+
+		if ($result) {
+			$result_array = $result->fetchAll(PDO::FETCH_COLUMN, 0);
+		}
+
+		return json_encode($result_array);
+	}
 }
 
diff --git a/web/template/pkgreq_form.php b/web/template/pkgreq_form.php
index cc45f29..623c247 100644
--- a/web/template/pkgreq_form.php
+++ b/web/template/pkgreq_form.php
@@ -23,6 +23,7 @@
 				</select>
 			</p>
 			<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.min.js"></script>
 			<script type="text/javascript">
 			function showHideMergeSection() {
 				if ($('#id_type').val() == 'merge') {
@@ -34,6 +35,18 @@
 
 			$(document).ready(function() {
 				showHideMergeSection();
+
+				$('#id_merge_into').typeahead({
+					source: function(query, callback) {
+						$.getJSON('<?= get_uri('/rpc'); ?>', {type: "suggest-pkgbase", 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>
 			<p id="merge_section">