maketank/Froxlor
2
0
Fork 0
Code Pull Requests Releases Activity

update search

Browse Source
This commit is contained in:
envoyr
2022-03-08 21:29:14 +01:00
parent 1a40c9ba17
commit ba1a16b39e
3 changed files with 87 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
templates/Froxlor/assets/js/main.js
View File

@@ -3238,32 +3238,54 @@ $(document).ready(function () {
/***/ (() => {
$(document).ready(function () {
console.log('included search');
$.typeahead({
input: '.js-typeahead-search_v1',
order: "desc",
dynamic: true,
display: ['data.title'],
href: "{{url}}",
emptyTemplate: "No results for {{query}}",
debug: true,
source: {
settings: {
ajax: {
method: "post",
url: "lib/ajax.php?action=searchsetting&theme=" + window.$theme + "&s=" + window.$session,
path: "title",
data: {
searchtext: '{{query}}'
}
}
var search = $('#search');
search.submit(function (e) {
e.preventDefault();
});
search.find('input').on('keyup', function () {
var query = $(this).val();
var dropdown = $('#search-dropdown'); // Hide search if query is empty
if (!query.length) {
dropdown.hide().html('');
return;
} // Show notification for short search query
if (query.length && query.length < 3) {
dropdown.show().html('<li class="list-group-item text-muted">Please enter more than 2 characters</li>');
return;
} // Search
$.ajax({
url: "lib/ajax.php?action=searchglobal&theme=" + window.$theme + "&s=" + window.$session,
type: "POST",
data: {
searchtext: query
},
dataType: "json",
success: function success(data) {
// Show notification if we got no results
if (Object.keys(data).length === 0) {
dropdown.show().html('<li class="list-group-item text-muted">Nothing found!</li>');
return;
} // Clear dropdown and show results
dropdown.show().html('');
Object.keys(data).forEach(function (key) {
dropdown.append('<li class="list-group-item text-muted text-capitalize">' + key + '</li>');
data[key].forEach(function (item) {
dropdown.append('<li class="list-group-item"><a href="' + item.href + '" class="text-decoration-none">' + item.title + '</a></li>');
});
});
},
error: function error(a, b) {
console.log(a, b);
dropdown.show().html('<li class="list-group-item text-muted">Whoops we got some errors!</li>');
}
},
callback: {
onInit: function onInit(node) {
console.log('Typeahead Initiated');
}
}
});
});
});

41
templates/Froxlor/src/js/components/search.js
View File

@@ -1,19 +1,50 @@
$(document).ready(function () {
console.log('included search');
let search = $('#search')
$('input[class=js-typeahead-search_v1]').on('change keyup keydown', function () {
search.submit(function (e) {
e.preventDefault();
});
search.find('input').on('keyup', function () {
let query = $(this).val();
let dropdown = $('#search-dropdown');
// Hide search if query is empty
if (!query.length) {
dropdown.hide().html('');
return;
}
// Show notification for short search query
if (query.length && query.length < 3) {
dropdown.show().html('<li class="list-group-item text-muted">Please enter more than 2 characters</li>');
return;
}
// Search
$.ajax({
url: "lib/ajax.php?action=searchglobal&theme=" + window.$theme + "&s=" + window.$session,
type: "POST",
data: {
searchtext: $(this).val()
searchtext: query
},
dataType: "json",
success: function (data) {
console.log(data);
success: data => {
// Show notification if we got no results
if (Object.keys(data).length === 0) {
dropdown.show().html('<li class="list-group-item text-muted">Nothing found!</li>');
return;
}
// Clear dropdown and show results
dropdown.show().html('');
Object.keys(data).forEach(key => {
dropdown.append('<li class="list-group-item text-muted text-capitalize">' + key + '</li>');
data[key].forEach(item => {
dropdown.append('<li class="list-group-item"><a href="' + item.href + '" class="text-decoration-none">' + item.title + '</a></li>');
});
});
},
error: function (a, b) {
console.log(a, b);
dropdown.show().html('<li class="list-group-item text-muted">Whoops we got some errors!</li>');
}
});
});

16
templates/Froxlor/userarea.html.twig
View File

@@ -30,19 +30,11 @@
<span class="navbar-toggler-icon"></span>
</button>
</div>
<form id="form-search_v1" name="form-search_v1">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input class="js-typeahead-search_v1" name="search_v1[query]" placeholder="Search" autocomplete="off">
</div>
<div class="typeahead__button">
<button type="submit">
<i class="typeahead__search-icon"></i>
</button>
</div>
</div>
<form id="search" class="position-relative" method="post">
<div class="input-group">
<input title="search" type="search" class="form-control-plaintext" placeholder="Search for ..." style="outline: none">
</div>
<ul id="search-dropdown" class="bg-white border list-group list-group-flush position-absolute" style="display:none; z-index: 50; max-height: 300px; overflow-y: scroll"></ul>
</form>
<div class="collapse navbar-collapse justify-content-end px-3" id="navbar">
<ul class="navbar-nav align-items-center">