search

TarekRaafat / autoComplete.js

Simple autocomplete pure vanilla Javascript library.
https://tarekraafat.github.io/autoComplete.js
Apache License 2.0
3.93k stars 236 forks source link

Have the ability to use another tag than "mark" for highlight of matched characters #306

Open williamdes opened 2 years ago

williamdes commented 2 years ago

Is your feature request related to a problem? Please describe. I would like to not use "mark" as it has bootstrap classes and use another tag like "b"

Please Describe alternatives you've considered Override the bootstrap CSS

Additional context Refactoring at https://github.com/code-lts/doctum

PS: this lib is great !

folknor commented 2 years ago

This is the only CSS for mark added by bootstrap 5's CSS reboot stylesheet:

mark {
  padding: $mark-padding;
  background-color: $mark-bg;
}

In your CSS, if you do this:

#autoComplete mark {
  padding: 0;
  background-color: none;
}

You should be fine, because #autoComplete mark has a specificity of 101, while mark only has 001.

https://polypane.app/css-specificity-calculator/

There's more talk about this specific topic here https://github.com/TarekRaafat/autoComplete.js/issues/264

williamdes commented 2 years ago

Thank you, Indeed adding a css class did work fine https://github.com/code-lts/doctum/blob/05d1c2872f9356dc73b6fb8dab56ba14175c805e/src/Resources/themes/default/doctum.js.twig#L273