mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-20 17:15:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Integrated algolia autocomplete search into navbar

Browse source
This commit is contained in:
Jan Böhmer 2024-02-27 00:28:17 +01:00
parent 60942c8254
commit 18eb0467ee
2 changed files with 21 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/controllers/elements/part_livesearch_controller.js
View file

@ -24,6 +24,8 @@ import {marked} from "marked";
export default class extends Controller {
static targets = ["input"];
_autocomplete;
connect() {
@ -32,9 +34,24 @@ export default class extends Controller {
// The URL template for the part detail pages
const part_detail_uri_template = this.element.dataset.detailUrl;
const that = this;
this._autocomplete = autocomplete({
container: this.element,
panelContainer: document.body,
panelPlacement: 'end',
placeholder: "Search for parts",
onSubmit({state, event, ...setters}) {
//Put the current text into each target input field
const input = that.inputTarget;
if (!input) {
return;
}
input.value = state.query;
input.form.requestSubmit();
},
getSources({ query }) {
return [
{

6
templates/_navbar_search.html.twig
View file

@ -69,6 +69,8 @@
</div>
</div>
<input type="search" class="form-control me-sm-2 my-2" placeholder="{% trans %}search.placeholder{% endtrans %}" name="keyword" required>
<button type="submit" class="form btn btn-outline-secondary my-2 text-nowrap">{% trans %}search.submit{% endtrans %}</button>
<div {{ stimulus_controller('elements/part_livesearch') }} class="mt-auto mb-auto"
data-autocomplete="{{ path('typeahead_parts', {'query': '__QUERY__'}) }}" data-detail-url="{{ path('part_info', {'id': '__ID__'}) }}">
<input type="hidden" name="keyword" required {{ stimulus_target('elements/part_livesearch', 'input') }}>
</div>
</form>