luxick/luxtools-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Serach enhancement refinement

Browse Source
This commit is contained in:
luxick
2026-02-09 09:57:26 +01:00
parent 1eb50d8969
commit 02e9932f1e
4 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/_search.less
View File

@@ -211,6 +211,10 @@
outline: none; outline: none;
} }
ul.search-suggestions li.is-tabbed > a {
box-shadow: inset 0 0 0 1px @ini_border;
}
ul.search-suggestions li.is-loading, ul.search-suggestions li.is-loading,
ul.search-suggestions li.is-empty { ul.search-suggestions li.is-empty {
padding: .15em .25em; padding: .15em .25em;

2
css/design.less
View File

@@ -143,7 +143,7 @@ form.search {
} }
button { button {
background: transparent url(images/search.png) no-repeat 0 0; background: transparent no-repeat 0 0;
border-width: 0; border-width: 0;
width: 19px; width: 19px;
height: 14px; height: 14px;

BIN
images/search.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 307 B

17
script.js
View File

@@ -104,6 +104,7 @@ jQuery(function(){
var curRequest = null; var curRequest = null;
var items = []; var items = [];
var activeIndex = -1; var activeIndex = -1;
var lastNavigation = null;
var listId = 'qsearch__listbox'; var listId = 'qsearch__listbox';
$form $form
@@ -127,6 +128,7 @@ jQuery(function(){
function clearActive() { function clearActive() {
activeIndex = -1; activeIndex = -1;
lastNavigation = null;
$input.removeAttr('aria-activedescendant'); $input.removeAttr('aria-activedescendant');
} }
@@ -200,7 +202,7 @@ jQuery(function(){
function updateActive() { function updateActive() {
var $options = $output.find('li[data-index]'); var $options = $output.find('li[data-index]');
$options.removeClass('is-active').attr('aria-selected', 'false'); $options.removeClass('is-active is-tabbed').attr('aria-selected', 'false');
if (activeIndex < 0 || activeIndex >= items.length) { if (activeIndex < 0 || activeIndex >= items.length) {
clearActive(); clearActive();
@@ -209,13 +211,17 @@ jQuery(function(){
var $active = $options.filter('[data-index="' + activeIndex + '"]'); var $active = $options.filter('[data-index="' + activeIndex + '"]');
$active.addClass('is-active').attr('aria-selected', 'true'); $active.addClass('is-active').attr('aria-selected', 'true');
if (lastNavigation === 'tab') {
$active.addClass('is-tabbed');
}
$input.attr('aria-activedescendant', $active.attr('id')); $input.attr('aria-activedescendant', $active.attr('id'));
} }
function moveActive(delta) { function moveActive(delta, source) {
if (!items.length) { if (!items.length) {
return; return;
} }
lastNavigation = source || null;
if (activeIndex < 0) { if (activeIndex < 0) {
activeIndex = delta > 0 ? 0 : items.length - 1; activeIndex = delta > 0 ? 0 : items.length - 1;
} else { } else {
@@ -349,19 +355,19 @@ jQuery(function(){
if (key === 'ArrowDown') { if (key === 'ArrowDown') {
event.preventDefault(); event.preventDefault();
moveActive(1); moveActive(1, 'arrow');
return; return;
} }
if (key === 'ArrowUp') { if (key === 'ArrowUp') {
event.preventDefault(); event.preventDefault();
moveActive(-1); moveActive(-1, 'arrow');
return; return;
} }
if (key === 'Tab') { if (key === 'Tab') {
event.preventDefault(); event.preventDefault();
moveActive(event.shiftKey ? -1 : 1); moveActive(event.shiftKey ? -1 : 1, 'tab');
return; return;
} }
@@ -374,6 +380,7 @@ jQuery(function(){
$output.on('mouseenter', 'li[data-index]', function () { $output.on('mouseenter', 'li[data-index]', function () {
activeIndex = parseInt(jQuery(this).attr('data-index'), 10); activeIndex = parseInt(jQuery(this).attr('data-index'), 10);
lastNavigation = 'mouse';
updateActive(); updateActive();
}); });