Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dropdown,search): highlightMatches option #2963

Merged
merged 9 commits into from
Feb 9, 2024
Merged

feat(dropdown,search): highlightMatches option #2963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e8a29e6
feat(dropdown): highlightMatches option
lubber-de Dec 11, 2023
35fe604
feat(search): highlightMatches option
lubber-de Dec 14, 2023
e601bc8
feat(search): non greedy regexp match
lubber-de Dec 14, 2023
314d636
feat(search): linting fix
lubber-de Dec 14, 2023
13f12eb
feat(search): linting fixes
lubber-de Dec 14, 2023
65c2d5d
feat(search): linting fixes
lubber-de Dec 14, 2023
3583eb0
feat(dropdown,search): respect preserveHTML
lubber-de Dec 15, 2023
3ac924d
feat(dropdown): always get original html for marking
lubber-de Dec 15, 2023
1feda8a
Merge branch 'develop' into highlightMatches
lubber-de Feb 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 41 additions & 10 deletions src/definitions/modules/dropdown.js
View file
Open in desktop
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));
lubber-de marked this conversation as resolved.
Dismissed Show resolved Hide resolved
});
}
}

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,3 +177,6 @@

/* Resizable */
@resizableDirection: vertical;

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