diff --git a/app/javascript/alchemy_admin/components/attachment_select.js b/app/javascript/alchemy_admin/components/attachment_select.js index 67672c1e88..fea6c7ab1d 100644 --- a/app/javascript/alchemy_admin/components/attachment_select.js +++ b/app/javascript/alchemy_admin/components/attachment_select.js @@ -8,14 +8,15 @@ class AttachmentSelect extends RemoteSelect { /** * html template for each list entry * @param {object} page + * @param {string} term * @returns {string} * @private */ - _renderListEntry(attachment) { + _renderListEntry(attachment, term) { return `
- ${attachment.name} + ${this._hightlightTerm(attachment.name, term)}
` } diff --git a/app/javascript/alchemy_admin/components/node_select.js b/app/javascript/alchemy_admin/components/node_select.js index fbf307c838..cae62551de 100644 --- a/app/javascript/alchemy_admin/components/node_select.js +++ b/app/javascript/alchemy_admin/components/node_select.js @@ -18,10 +18,11 @@ class NodeSelect extends RemoteSelect { /** * html template for each list entry * @param {object} node + * @param {string} term * @returns {string} * @private */ - _renderListEntry(node) { + _renderListEntry(node, term) { const ancestors = node.ancestors.map((a) => a.name) const seperator = `` @@ -33,7 +34,7 @@ class NodeSelect extends RemoteSelect { ${ancestors.length > 0 ? ancestors.join(seperator) + seperator : ""} - ${node.name} + ${this._hightlightTerm(node.name, term)}
diff --git a/app/javascript/alchemy_admin/components/page_select.js b/app/javascript/alchemy_admin/components/page_select.js index d8a43bd305..e7567ceb04 100644 --- a/app/javascript/alchemy_admin/components/page_select.js +++ b/app/javascript/alchemy_admin/components/page_select.js @@ -36,15 +36,16 @@ class PageSelect extends RemoteSelect { /** * html template for each list entry * @param {object} page + * @param {string} term * @returns {string} * @private */ - _renderListEntry(page) { + _renderListEntry(page, term) { return `
- ${page.name} + ${this._hightlightTerm(page.name, term)} ${page.site.name}
diff --git a/app/javascript/alchemy_admin/components/remote_select.js b/app/javascript/alchemy_admin/components/remote_select.js index 2f590c1467..07035e249d 100644 --- a/app/javascript/alchemy_admin/components/remote_select.js +++ b/app/javascript/alchemy_admin/components/remote_select.js @@ -62,7 +62,8 @@ export class RemoteSelect extends AlchemyHTMLElement { }, ajax: this.ajaxConfig, formatSelection: (item) => this._renderResult(item), - formatResult: (item) => this._renderListEntry(item) + formatResult: (item, _el, query) => + this._renderListEntry(item, query.term) } } @@ -126,6 +127,7 @@ export class RemoteSelect extends AlchemyHTMLElement { /** * html template for each list entry * @param {object} item + * @param {string} term * @returns {string} * @private */ @@ -134,4 +136,15 @@ export class RemoteSelect extends AlchemyHTMLElement { "You need to define a _renderListEntry function on your sub class!" ) } + + /** + * hightlighted search term + * @param {string} name + * @param {string} term + * @returns {string} + * @private + */ + _hightlightTerm(name, term) { + return name.replace(new RegExp(term, "gi"), (match) => `${match}`) + } } diff --git a/vendor/assets/stylesheets/alchemy_admin/select2.scss b/vendor/assets/stylesheets/alchemy_admin/select2.scss index 07d9ea7efc..5241f59deb 100644 --- a/vendor/assets/stylesheets/alchemy_admin/select2.scss +++ b/vendor/assets/stylesheets/alchemy_admin/select2.scss @@ -396,6 +396,7 @@ html[dir="rtl"] .select2-results { .select2-results li em { background: #feffde; font-style: normal; + text-decoration: underline; } .select2-results .select2-highlighted em {