Add archweb typeahead implementation

Use a pure vanilla JavaScript typeahead implementation to finally
deprecate the old jQuery version and typeahead library.
This commit is contained in:
Jelle van der Waa 2021-06-22 22:27:17 +02:00
parent 512f8064c1
commit 42bd0027b3
No known key found for this signature in database
GPG key ID: C06086337C50773E
6 changed files with 188 additions and 70 deletions

View file

@ -25,7 +25,7 @@ if (has_credential(CRED_PKGBASE_DELETE)): ?>
<?= __('Enter the package name you wish to merge the package into. '); ?>
<?= __('Select the checkbox to confirm action.') ?>
</p>
<form action="<?= get_pkgbase_uri($pkgbase_name); ?>" method="post">
<form id="merge-form" action="<?= get_pkgbase_uri($pkgbase_name); ?>" method="post">
<fieldset>
<input type="hidden" name="IDs[<?= $base_id ?>]" value="1" />
<input type="hidden" name="ID" value="<?= $base_id ?>" />
@ -33,25 +33,17 @@ 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://cdn.jsdelivr.net/npm/jquery@1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-typeahead.min.js"></script>
<script type="text/javascript" src="/js/typeahead.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');
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById('merge_Into');
const form = document.getElementById('merge-form');
const type = "suggest-pkgbase";
typeahead.init(type, input, form, false);
});
</script>
<p><label id="merge-into" for="merge_Into" ><?= __("Merge into:") ?></label>
<input type="text" id="merge_Into" name="merge_Into" value="<?= isset($_GET['into']) ? $_GET['into'] : '' ?>" /></p>
<input type="text" id="merge_Into" name="merge_Into" value="<?= isset($_GET['into']) ? $_GET['into'] : '' ?>" autocomplete="off"/></p>
<p><label class="confirmation"><input type="checkbox" name="confirm" value="1" />
<?= __("Confirm package merge") ?></label></p>
<p><input type="submit" class="button" name="do_Delete" value="<?= __("Merge") ?>" /></p>