Skip to content

Commit

Permalink
feat(search): highlightMatches option
Browse files Browse the repository at this point in the history
  • Loading branch information
@lubber-de
lubber-de committed Dec 14, 2023
1 parent e8a29e6 commit 35fe604
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 15 deletions.
15 changes: 9 additions & 6 deletions src/definitions/modules/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -890,9 +890,10 @@
? 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();
Expand Down Expand Up @@ -948,7 +949,7 @@
var querySplit = query.split(''),
diacriticReg = settings.ignoreDiacritics ? '[\u0300-\u036F]?' : '',
htmlReg = '(?![^<]*>)',
markedRegExp = new RegExp(htmlReg + '(' + querySplit.join(diacriticReg + ')(.*)' + htmlReg +'(') + diacriticReg + ')', regExpFlags),
markedRegExp = new RegExp(htmlReg + '(' + querySplit.join(diacriticReg + ')(.*)' + htmlReg +'(') + diacriticReg + ')', regExpIgnore),

Check failure on line 952 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Operator '+' must be spaced
markedReplacer = function(){

Check failure on line 953 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Missing space before function parentheses

Check failure on line 953 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Missing space before opening brace
var args = [].slice.call(arguments,1, querySplit.length * 2).map(function(x, i){

Check failure on line 954 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

A space is required after ','

Check failure on line 954 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Missing space before function parentheses

Check failure on line 954 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Missing space before opening brace
return i & 1 ? x : '<mark>' + x + '</mark>'})

Check failure on line 955 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected use of '&'

Check failure on line 955 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Requires a space before '}'

Check failure on line 955 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Closing curly brace should be on the same line as opening curly brace or on the line after the previous block

Check failure on line 955 in src/definitions/modules/dropdown.js

View workflow job for this annotation

GitHub Actions / Lint 

Missing semicolon
Expand Down Expand Up @@ -1001,8 +1002,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
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
60 changes: 53 additions & 7 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 @@ -629,7 +632,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 @@ -665,13 +668,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 @@ -702,8 +706,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 @@ -730,8 +736,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 @@ -1086,6 +1094,38 @@
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>'})
;
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 @@ -1312,9 +1352,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
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 35fe604

Please sign in to comment.