In the previous question I had a problem with filtering. With this sorted out. Now I have another problem, I can’t fix it, I tried it all. In one stanichka I do 5 selektov with the help Select2. The problem is that the first select works as expected. Filters words and lists them in bold in the list. But in the rest it does not work out this way, in other words, the written word in the select code is not bold:

This is the first select This is the second select

// article $(".search_article select").select2({ ajax: { url: "/index.php/search/jsonTags?type=0", dataType: 'json', delay: 250, async: true, cache: true, data: function(params) { return { query: params.term, page: params.page }; }, processResults: function(data, params) { var items = $.map(data, function(item, i, params) { return { text: item.tag, slug: item.tag, id: item.tag }; }); return {results: items}; } }, minimumInputLength: 3, placeholder: "Введите ариткул", language: "ru", templateResult: function (data) { if (data.id === '') { // adjust for custom placeholder values return 'Custom styled placeholder text'; } var term = $('.select2-search__field').val(); var $text = $('<span>'+data.text.replace(term, '<strong>'+term+'</strong>')+'</span>'); return $text; } }); // material $(".material select").select2({ ajax: { url: "/index.php/search/jsonTags?type=2", dataType: 'json', delay: 250, async: true, cache: true, data: function(params) { return { query: params.term, page: params.page }; }, processResults: function(data, params) { var items = $.map(data, function(item, i, params) { return { text: item.tag, slug: item.tag, id: item.tag }; }); return {results: items}; } }, minimumInputLength: 3, placeholder: "Введите материал", language: "ru", templateResult: function (data) { if (data.tag === '') { // adjust for custom placeholder values return 'Custom styled placeholder text'; } var term = $('.select2-search__field').val(); var $text = $('<span>'+data.text.replace(term, '<strong>'+term+'</strong>')+'</span>'); return $text; } });

HTML:

  <div class="search_article"> <span>Артикул</span> <select name="article" id="article" multiple="multiple"></select> </div> <div class="material"> <span>Материал</span> <select name="material" id="material" multiple="multiple"></select> </div>

$('<span>'+data.text.replace(term, '<strong>'+term+'</strong>')+'</span>');

This line is responsible for this), but why it cannot work a second time I cannot understand. data.text.replace (() function

  • Open the source of the plugin and see how it renders the results, see what is missing or what the problem is. In his project, this method was completely redefined, since the standard render did not fully fit, everything is convenient and understandable there. - Kirill
  • I’ll try to look now, but with JS, I’m not everything ok) it’s just that in the first step all the rules work and already in 2 it doesn’t work, it's strange ( - pwnz22

1 answer 1

In the second case, you use the same term as in the first

 var term = $('.select2-search__field').val();

Select2 with the class .select2-search__field you have five, and the first select is always used and the term is taken from it

Just get the term from the desired selectbox using the correct css selector.

  • Lured with it)) thanks for the help) the exact answer) - pwnz22