Having every instance of character searched for appear in bold in filter as you type list

Hi.

I am trying to make any character typed into a search box appear in bold (every instance) in a filter as you type list.

So, in the fiddle above, for example, typing an ‘e’ would make all three 'e’s in ‘vegetables’ appear in bold, not just the first ‘e’. I have found the fiddle below, however, the only way I had got it to even begin to work was replacing my entire javascript with this code, whereas I want to make as few changes as possible to the code which user Paul_Wilkins has so kindly written/amended (fiddle above). I also do not wish it to be case sensitive as it is is the fiddle below.

As the fiddle above didn’t contain any CSS, I had thought it was a javascript/JQuery matter, however, as per Paul_Wilkins’ advice, I am posting in the CSS forum. As mentioned elsewhere, my knowledge in this subject is very much limited and any help that can be offered would be very much appreciated!

Thanks.

Hi, TechnoKid. Since this sounds like a JS issue, I have moved your topic into the JavaScript category.

Cheers

No problem, ronpat; thanks very much.

Wait till I get hold of that Paul_Wilkins fellow! HAHAH

The JavaScript work has been done on this. We need the help of a CSS guru for when it comes to marking up the select options, on the HTML and CSS to mark in bold the found search terms.

Please move this thread back to the CSS forum.

2 Likes

Returned to the CSS forum. :slight_smile:

Hahah! :smiley:

So first of all - when using a multiple select, can the options be styled so that we can mark up the found search terms within each of the options? I’m thinking the answer will be no.

Secondly, when using an item list, what’s the most appropriate way to markup search terms found within a word?

Thanks TechnoBear/Paul_Wilkins.

Not sure if this would help in anyway to figure out a solution, but found the following on the web.

Replacing:
background: orange;

with:
font-weight: bold;

seems to do what I am asking (have to look closely though, as bold doesn’t appear very noticeable).

I realise it’s a ‘plugin’, but the homepage for it states that it “Can be used with pure JavaScript”.

Hope this helps.

Thanks.

You can assign {font-weight:bold} and {background-color:orange} to mark at the same time.

1 Like

In case anyone is confused, my username has been changed to what I thought I had specified when signing up but ended up with the previous username by mistake.

Thanks ronpat. Not sure if I want both bold and highlighting. The fiddle seems to use Bootstrap. I’m already using JQuery and wanted to keep dependencies to a minimum. I also will not be using it as a plugin.

Those values are assigned in CSS. They are separate from Bootstrap and jQuery.

Sorry, ronpat, my statement regarding Bootstrap/JQuery was not in response to your post; it was just an unrelated comment that I thought I’d mention. CSS seems to be the language that I have found least complicated to interpret from the rest of 'em! I’m only talking about the basics, however!

From the information Paul_Wilkins has provided and the fiddle I have posted a link to, is what I am asking for possible?

Thanks.

TechnoKid,

I can’t imagine this as being solved with CSS. The “look” of the “marked” characters/strings can be styled by CSS, but the act of finding and marking them in real time as you type belongs to JS.

I feel reasonably sure that what you are asking for is possible, but am not yet satisfied that I appreciate the scope of your search and highlight wish. Do you wish to be able to open any text file in a browser and search for text with this utililty or do you expect to search a formatted layout such as a table or list of items?

What does your present JS do that makes you reluctant to want to change it?

Seems to me that you will have to replace your JavaScript with something that does what you wish.

Perhaps @PaulOB will offer his opinion.

3 Likes

Since you have linked a few fiddles which are all doing what you want but not quite, I’d suggest to start it all from scratch instead of modifying existing solutions. So what you essentially have to do is replace occurrences of a search string with that string wrapped in a <span> (or <b> or whatever):

function highlight (el, str) {

  // The original text, if any, or the actual
  // text of the element 
  var text = el.dataset.text || el.textContent

  // A regular expression from the search string
  // that would replace all occurrences (g) and
  // is case-insensitive (i)
  var pattern = new RegExp(str, 'gi')

  // If no search string is provided,
  // reset the highlighting
  if (!str) {
    el.textContent = text
    return
  }

  // Store the original text in the dataset,
  // and wrap all occurrences of the search
  // string in a <span>
  el.dataset.text = text
  el.innerHTML = text.replace(
    pattern, 
    '<span class="highlight">$&</span>'
  )
}

This might be used with jQuery like e.g.

$('li').each(function () {
  highlight(this, 'some string')
})

or you might even add it to the jQuery prototype directly like

jQuery.fn.highlight = function (str) {
  return this.each(function () {
    highlight(this, str)
  })
}

$('li').highlight('some string')

This will mess up things if the elements to highlight have themselves element-children, in which case you’d have to walk the children recursively. But it’s be a starting point to proceed.

2 Likes

Yes css is little use here apart form adding the color to whatever tags are added to highlight the item. I think @m3g4p0p has offered a way forward now anyway.

I suggest using the mark element to wrap the highlighted items rather than a span.

3 Likes

Thanks ronpat/PaulOB. Yes, I thought that it was a JS thing also. Maybe I didn’t describe it very well the first time, which may be the reason Paul_Wilkins requested the thread to be moved. Anyhow, to answer your questions, ronpat:

It’ll be just one webpage and the text in the divs is for information purposes only; it does not ‘do’ anything, so using my example code, if a user wanted to see suggestions of various types of vegetables, they would search for ‘vegetables’ and just view the results.

One of the reasons I wish to have the bold effect, is that items in the drop down list are long sentences so when a user types something, they can quickly ‘see’ where in the long sentence the keyword is. Besides, I think the effect is kinda cool!

There are no tables or text files; the entire system is the example code in the fiddle posted.

The reason I have a multiple select is that I want users to be able to compare results and not have to click them one by one and having to try to remember previously clicked ones. So, for example, if ‘Vegatables from Africa’ and ‘Vegetables from Australia’ were in the drop down list and they ctrl and clicked both results, they would be able to see them both at the same time. Ideally, what I really wanted it to do was allowing results from separate searches to be compared, so for example, if ‘Fruits from Africa’ and ‘Fruits from Australia’ were also in the list, they could search for “veg” and click ‘Vegatables from Africa’, then search for “fru” and click ‘Fruits from Australia’ BUT be able to see/compare both at the same time, i.e. the new search would not remove the result of the original search. Each could then be removed by deselecting in the dropdown or clicking the Close (X) button on the div itself. I am not sure if this is even possible for a multiple select dropdown. I have looked into those dual transfer list box things also and they seem suitable for what I have described above, however, I am not sure if results can have multiple lines of text like I have in my divs.

The reason I am reluctant to change my JS is that I am not sure I would understand any wholesale changes. It has taken me months to get where I was when I posted my original thread, which to you experts, may seem like a few easy changes here and there! HAHAH. Paul_Wilkins has also very kindly cleaned it up and re-written it so nicely, that I would be reluctant messing too much with it, being not too literate on the subject.

Thanks very much for taking the time to provide this code and accompanying helpful explanations, m3g4p0p. At present, unfortunately, my knowledge is pretty much limited to modifying existing code. I do wish I could learn it, as I hate not understanding what things mean, however, at the moment, it’s a matter of days before I need to publish the system live. I am currently in the process of editing/tidying up all the text that will populate the drop down list; haven’t got round to setting it up in the code yet, however, will see what I can do with your code as soon as I can and post back.

Thanks.

1 Like

Just to update you all, Paul_Wilkins has implemented the emboldening feature as part of his MEGA response to my original query regarding multi-select lists.

Thanks for all the responses; they are all very much appreciated and are helpful with my learning process.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.