Highlight the words

#1

I’m trying to do the highlight of the words, I have been found. I created a new Input with class=“sel 5”. Now everything works fine. You can see: http://jsfiddle.net/k50guw2y/7/
But I can’t do it for the class=“select 2-search__field”.
How can I get to the Input field?
Please help me. Thanks

#2

I assume you want to highlight the items in the page that match the item the user has selected in the Select2 widget. If that’s what you’re trying to do, you don’t need to “get to the input field”. Instead, attach an event handler for the Select2’s select2:select event. Your handler will receive an Event object. You can access that object’s params.data property to get the current selection. Your handler can use that value to highlight the matching text in the page.

I modified your fiddle with the following code, and it works:

	$('.js-source-states').on('select2:select', function(e) {
		$('#text').removeHighlight();
		var txt = e.params.data.text;
		if (txt == '') return;
		$('#text').highlight(txt);
		search_count = $('#text span.highlight').size() - 1;
		count_text = search_count + 1;
		search_number = 0;
		$('#text').selectHighlight(search_number);
		if ( search_count >= 0 ) scroll_to_word();
		$('#count').html('Find: <b>'+count_text+'</b>');
	});

There are a few other changes as well, especially correcting how you specify the placeholder.

1 Like
#3

Thank you.
But I find to look for letters when typing in the input class=select 2-search__field. For example, when I’m typing letter Bra in search box (input) with class="sel5" , the word Brass highlights Brass in table. One more example - when I’m typing letter Wate the word Water highlights Water in table.
If You look at my example and write Bra in the field search (simple input) with class=“sel5”, you can see this effect

#4

Select2 does not fire an event each time the user presses a key in its search box. However, you can use jQuery to target the Select2’s input box and attach an input event handler (see this fiddle). Note that there are a couple of details to be aware of:

  1. The search input field isn’t actually added to the DOM until the first time the dropdown is opened. Therefore, my code programmatically opens the dropdown (line 50 of the JavaScript) before attaching the input event handler. It also closes the dropdown after attaching the event handler (line 65). This whole process happens so quickly that the user doesn’t see it.
  2. You have to use the input event, not a key* event, to monitor changes in the search field, because the key* events are fired before the input field’s value property is updated, whereas the input event is fired after the value property is updated.

I hope this helps you do what you want.

1 Like
#5

Thanky you, This is great! I’m impressed. Thank you for helping beginners.
Can the same effect be applied to dropdownlist with class=select2-results__option? I try to do it like this - var $search Field = $(“select 2-results__option”) then nothing happens. I thought it would be easy.

#6

If by “the same effect” you mean can you highlight the “partial” matches in the Select2 results dropdown while the user is typing, the answer is yes, but you use a custom matcher callback to do it, instead of an event handler.

I have an example on CodePen.io that shows how. (Note that my example code does much more than just matching in the visible text, but I hope you’ll see the logic you need to implement. My custom matcher starts on line 29 of index.js, but the relevant logic for your needs is on lines 47–60, as well as line 76 [which is just a default fallback]). On my example page. try typing “or” to see several different items in the results list with the matching letters highlighted.

I enjoy helping the community. If you find my answers useful, I would appreciate you “liking” them (by clicking the heart icon under my answer). That will let other people know they can trust my answers to their questions too.

1 Like
#7

http://jsfiddle.net/knem1j6q/
Thanks a lot. But I can’t get your code to be friends with my code. Maybe it is certainly easy, but I’m sorry, I’m just starting to learn. This is the last question

#8

I tried to parse your code. It works, but I think a lot of unnecessary http://jsfiddle.net/o739y4br/

#9

Yes, my code sample was built for a different reason and contains lots of logic you don’t need. That’s why I pointed out which lines of my code you should pay attention to. If you’re still having issues, let me know and I’ll try to help you.

#10

I really need help with your code working in this http://jsfiddle.net/sjmq07ry/. I need highlight the “partial” matches in the Select2 results dropdown while the user is typing.
Thanks a lot for your help

#11

Here’s the code https://jsfiddle.net/wp8x4qg6/1/ highlight the “partial” matches in the Select2 results dropdown while the user is typing.
And this http://jsfiddle.net/jpisello/vkrxu6do/33/ which you made.
But I can’t get the two codes to work together

#12

John30013, I need a little help. It is impossible to make two effects. This http://jsfiddle.net/vky8cfr9/4/ - only highlight the “partial” matches in the Select2 results dropdown while the user is typing.
Highlight in the table not working. But if You remove code between:

// highlight in dropdown
Code of highlight the “partial” matches in the Select2 results dropdown while the user is typing.
// end highlight dropdown

then the Highlight in the table will work.
Thank you.

#13

You are initializing the Select2 twice–once to set up the input event handler, and then a second time to set up the custom templateResult. The second initialization overrides the first one, and so your input handler disappears. The solution is to initialize the Select2 with the custom templateResult, and then set up the input event handler. See my update to your fiddle here: http://jsfiddle.net/yqzhgj75/2/.

1 Like
#14

John30013, Thank you. It’s cool

#15

John30013, I like this plugin and I need a little help. I decided to use two elements as here https://jsfiddle.net/p0hq4g7L/2/.
How can I combine two templateResult into one to work - 1)highlight in the drop-down list and 2) display the second element in the dropdown?
Second templateResult is between
//This second templateResult
code
//end of second templateResult
If you remove the comments, the second element is displayed http://jsfiddle.net/wygxh1ts/1/
But highlight in the drop-down will not work.
Thank you.

#16

You just need to combine the logic of both templateResults into one: http://jsfiddle.net/jpisello/3ykr60Lx/22/.

Note that some of your “second templateResults” logic went into my templateResults anonymous callback function (in particular, the check for an item with no .id property, on line 36), and the rest of it went into the markMatch() function. Basically, I just included you “prefix” (“From data”) <span> in the initialized $result variable, and then used jQuery’s .append() instead of .text() to push the remaining text (highlighted or not) into $result.

1 Like
#17

Thank you very much. Last question. But earlier I was able to insert data from the database (using the data attribute) and now I don’t.
I have ajax request

$.ajax({
url: "/product/getData.php",
success: function (data) {
var option = '<option value="not selected||0||0" data-u1="0" data-w1="0">not selected</option>';
data.n.forEach(function (item) {
option += '<option value="' + item.Total + '||0||0" data-u="0" data-description="' + item.Description + '">' + item.Total + '</option>";
});
$(".CalculationType1").attr("data-value", "1");
$(".CalculationType1").html(option);
}
});

And in this function, I take data from the Description column in my database and I have displayed data from the database. So…

function format (option) {
if (!option.id) return option.text;
console.log(option.element);
return '<span style="color:green; width:150px;">'+option.element.dataset.description+'</span> '+option.text;   
 };

So I can not do that in this http://jsfiddle.net/jpisello/3ykr60Lx/22/?

#18

Your Ajax success callback must output a JavaScript object in the format required by Select2, not create HTML option elements. You can store additional data beyond the ID and text of each item in the structure. The templateResult callback receives these data items, not HTML option elements, so that’s what you need to process.

Review the Select2 data documentation for more details about the required data format.