Skip to content

Commit

Permalink
feat(dropdown,search): highlightMatches option
Browse files Browse the repository at this point in the history 
This PR adds a new option highlightMatches to dropdown and search module
Customizing the mark (background)-color is prepared in the LESS files for a custom theme, but disabled by default. (as the default would do nothing anyway)
I decided to leave this to each browsers defaults as its visuals are most familiar to usual browser search and the mark HTML tag uses the exact same styling.

Also fixed some typo inside search.less
Also made ignoreSearchCase available for search as we have the same for dropdown already
  • Loading branch information
@lubber-de
lubber-de authored Feb 9, 2024
1 parent 6c16b5d commit 94e4e87
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 21 deletions.
51 changes: 41 additions & 10 deletions src/definitions/modules/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -890,11 +890,13 @@
? query
: module.get.query()
),
results = null,
escapedTerm = module.escape.string(searchTerm),
regExpFlags = (settings.ignoreSearchCase ? 'i' : '') + 'gm',
results = null,
escapedTerm = module.escape.string(searchTerm),
regExpIgnore = settings.ignoreSearchCase ? 'i' : '',
regExpFlags = regExpIgnore + 'gm',
beginsWithRegExp = new RegExp('^' + escapedTerm, regExpFlags)
;
module.remove.filteredItem();
// avoid loop if we're matching nothing
if (module.has.query()) {
results = [];
Expand Down Expand Up @@ -938,12 +940,34 @@
;
}
module.debug('Showing only matched items', searchTerm);
module.remove.filteredItem();
if (results) {
$item
.not(results)
.addClass(className.filtered)
;
if (settings.highlightMatches && (settings.match === 'both' || settings.match === 'text')) {
var querySplit = query.split(''),
diacriticReg = settings.ignoreDiacritics ? '[\u0300-\u036F]?' : '',
htmlReg = '(?![^<]*>)',
markedRegExp = new RegExp(htmlReg + '(' + querySplit.join(diacriticReg + ')(.*?)' + htmlReg + '(') + diacriticReg + ')', regExpIgnore),
markedReplacer = function () {
var args = [].slice.call(arguments, 1, querySplit.length * 2).map(function (x, i) {
return i & 1 ? x : '<mark>' + x + '</mark>'; // eslint-disable-line no-bitwise
});

return args.join('');
}
;
$.each(results, function (index, result) {
var $result = $(result),
markedHTML = module.get.choiceText($result, true)
;
if (settings.ignoreDiacritics) {
markedHTML = markedHTML.normalize('NFD');
}
$result.html(markedHTML.replace(markedRegExp, markedReplacer));
});
}
}

if (!module.has.query()) {
Expand Down Expand Up @@ -979,8 +1003,10 @@
termLength = term.length,
queryLength = query.length
;
query = settings.ignoreSearchCase ? query.toLowerCase() : query;
term = settings.ignoreSearchCase ? term.toLowerCase() : term;
if (settings.ignoreSearchCase) {
query = query.toLowerCase();
term = term.toLowerCase();
}
if (queryLength > termLength) {
return false;
}
Expand Down Expand Up @@ -3084,6 +3110,12 @@
$item.removeClass(className.active);
},
filteredItem: function () {
if (settings.highlightMatches) {
$.each($item, function (index, item) {
var $markItem = $(item);
$markItem.html($markItem.html().replace(/<\/?mark>/g, ''));
});
}
if (settings.useLabels && module.has.maxSelections()) {
return;
}
Expand Down Expand Up @@ -3809,8 +3841,7 @@
;
if (shouldEscape.test(string)) {
string = string.replace(forceAmpersand ? /&/g : /&(?![\d#a-z]{1,12};)/gi, '&amp;');

return string.replace(badChars, escapedChar);
string = string.replace(badChars, escapedChar);
}

return string;
Expand Down Expand Up @@ -4015,6 +4046,7 @@

match: 'both', // what to match against with search selection (both, text, or label)
fullTextSearch: 'exact', // search anywhere in value (set to 'exact' to require exact matches)
highlightMatches: false, // Whether search result should highlight matching strings
ignoreDiacritics: false, // match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à", etc...)
hideDividers: false, // Whether to hide any divider elements (specified in selector.divider) that are sibling to any items when searched (set to true will hide all dividers, set to 'empty' will hide them when they are not followed by a visible item)

Expand Down Expand Up @@ -4239,8 +4271,7 @@
;
if (shouldEscape.test(string)) {
string = string.replace(/&(?![\d#a-z]{1,12};)/gi, '&amp;');

return string.replace(badChars, escapedChar);
string = string.replace(badChars, escapedChar);
}

return string;
Expand Down
7 changes: 7 additions & 0 deletions src/definitions/modules/dropdown.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1860,6 +1860,13 @@ select.ui.dropdown {
});
}

& when (@variationDropdownHighlightMatches) {
.ui.dropdown .menu > .item mark {
background: @highlightMatchesBackground;
color: @highlightMatchesColor;
}
}

& when (@variationDropdownInverted) {
/* --------------
Inverted
Expand Down
66 changes: 57 additions & 9 deletions src/definitions/modules/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,10 @@
// this makes sure $.extend does not add specified search fields to default fields
// this is the only setting which should not extend defaults
if (parameters && parameters.searchFields !== undefined) {
settings.searchFields = parameters.searchFields;
settings.searchFields = Array.isArray(parameters.searchFields)
? parameters.searchFields
: [parameters.searchFields]
;
}
},
},
Expand Down Expand Up @@ -631,7 +634,7 @@
exactResults = [],
fuzzyResults = [],
searchExp = searchTerm.replace(regExp.escape, '\\$&'),
matchRegExp = new RegExp(regExp.beginsWith + searchExp, 'i'),
matchRegExp = new RegExp(regExp.beginsWith + searchExp, settings.ignoreSearchCase ? 'i' : ''),

// avoid duplicates when pushing results
addResult = function (array, result) {
Expand Down Expand Up @@ -667,13 +670,14 @@
var concatenatedContent = [];
$.each(searchFields, function (index, field) {
var
fieldExists = (typeof content[field] === 'string') || (typeof content[field] === 'number')
fieldExists = typeof content[field] === 'string' || typeof content[field] === 'number'
;
if (fieldExists) {
var text;
text = typeof content[field] === 'string'
? module.remove.diacritics(content[field])
: content[field].toString();
text = $('<div/>', { html: text }).text().trim();
if (settings.fullTextSearch === 'all') {
concatenatedContent.push(text);
if (index < lastSearchFieldIndex) {
Expand Down Expand Up @@ -704,8 +708,10 @@
},
},
exactSearch: function (query, term) {
query = query.toLowerCase();
term = term.toLowerCase();
if (settings.ignoreSearchCase) {
query = query.toLowerCase();
term = term.toLowerCase();
}

return term.indexOf(query) > -1;
},
Expand All @@ -732,8 +738,10 @@
if (typeof query !== 'string') {
return false;
}
query = query.toLowerCase();
term = term.toLowerCase();
if (settings.ignoreSearchCase) {
query = query.toLowerCase();
term = term.toLowerCase();
}
if (queryLength > termLength) {
return false;
}
Expand Down Expand Up @@ -1088,6 +1096,39 @@
response[fields.results] = response[fields.results].slice(0, settings.maxResults);
}
}
if (settings.highlightMatches) {
var results = response[fields.results],
regExpIgnore = settings.ignoreSearchCase ? 'i' : '',
querySplit = module.get.value().split(''),
diacriticReg = settings.ignoreDiacritics ? '[\u0300-\u036F]?' : '',
htmlReg = '(?![^<]*>)',
markedRegExp = new RegExp(htmlReg + '(' + querySplit.join(diacriticReg + ')(.*?)' + htmlReg + '(') + diacriticReg + ')', regExpIgnore),
markedReplacer = function () {
var args = [].slice.call(arguments, 1, querySplit.length * 2).map(function (x, i) {
return i & 1 ? x : '<mark>' + x + '</mark>'; // eslint-disable-line no-bitwise
});

return args.join('');
}
;
$.each(results, function (label, content) {
$.each(settings.searchFields, function (index, field) {
var
fieldExists = typeof content[field] === 'string' || typeof content[field] === 'number'
;
if (fieldExists) {
var markedHTML = typeof content[field] === 'string'
? content[field]
: content[field].toString();
if (settings.ignoreDiacritics) {
markedHTML = markedHTML.normalize('NFD');
}
markedHTML = markedHTML.replace(/<\/?mark>/g, '');
response[fields.results][label][field] = markedHTML.replace(markedRegExp, markedReplacer);
}
});
});
}
if (isFunction(template)) {
html = template(response, fields, settings.preserveHTML);
} else {
Expand Down Expand Up @@ -1316,9 +1357,15 @@
// search anywhere in value (set to 'exact' to require exact matches
fullTextSearch: 'exact',

// Whether search result should highlight matching strings
highlightMatches: false,

// match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à", etc...)
ignoreDiacritics: false,

// whether to consider case sensitivity on local searching
ignoreSearchCase: true,

// whether to add events to prompt automatically
automatic: true,

Expand Down Expand Up @@ -1436,8 +1483,9 @@
};
if (shouldEscape.test(string)) {
string = string.replace(/&(?![\d#a-z]{1,12};)/gi, '&amp;');

return string.replace(badChars, escapedChar);
string = string.replace(badChars, escapedChar);
// FUI controlled HTML is still allowed
string = string.replace(/&lt;(\/)*mark&gt;/g, '<$1mark>');
}

return string;
Expand Down
11 changes: 9 additions & 2 deletions src/definitions/modules/search.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -565,15 +565,22 @@
.ui.search {
font-size: @relativeMedium;
}
& when not (@variationFeedSizes = false) {
each(@variationFeedSizes, {
& when not (@variationSearchSizes = false) {
each(@variationSearchSizes, {
@s: @{value}SearchSize;
.ui.@{value}.search {
font-size: @@s;
}
});
}

& when (@variationSearchHighlightMatches) {
.ui.search > .results mark {
background: @highlightMatchesBackground;
color: @highlightMatchesColor;
}
}

/* --------------
Mobile
--------------- */
Expand Down
3 changes: 3 additions & 0 deletions src/themes/default/globals/site.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1538,3 +1538,6 @@

@inputWarningPlaceholderColor: if(iscolor(@formWarningColor), lighten(@formWarningColor, 40), @formWarningColor);
@inputWarningPlaceholderFocusColor: if(iscolor(@formWarningColor), lighten(@formWarningColor, 30), @formWarningColor);

@defaultHighlightMatchesBackground: revert;
@defaultHighlightMatchesColor: revert;
2 changes: 2 additions & 0 deletions src/themes/default/globals/variation.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,7 @@
@variationDropdownPointing: true;
@variationDropdownColumnar: true;
@variationDropdownScrollhint: true;
@variationDropdownHighlightMatches: false;
@variationDropdownSizes: @variationAllSizes;

/* Embed */
Expand Down Expand Up @@ -678,6 +679,7 @@
@variationSearchVeryLong: true;
@variationSearchResizable: true;
@variationSearchScrolling: true;
@variationSearchHighlightMatches: false;
@variationSearchSizes: @variationAllSizes;

/* Shape */
Expand Down
3 changes: 3 additions & 0 deletions src/themes/default/modules/dropdown.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,3 +480,6 @@

/* Resizable */
@resizableDirection: vertical;

@highlightMatchesBackground: @defaultHighlightMatchesBackground;
@highlightMatchesColor: @defaultHighlightMatchesColor;
3 changes: 3 additions & 0 deletions src/themes/default/modules/search.variables
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,3 +177,6 @@

/* Resizable */
@resizableDirection: vertical;

@highlightMatchesBackground: @defaultHighlightMatchesBackground;
@highlightMatchesColor: @defaultHighlightMatchesColor;

0 comments on commit 94e4e87

Please sign in to comment.