JSFiddle - React, Tailwind, and code Playground

by kulakoff

HTML

<input type="text" id="search">
<div id="blocks">

</div>

JavaScript

var array = [
  ['слово', 'второе слово'],
  ['третье слово', 'четвёртое слово']
];

var $search = $('#search');
$search.on('input', function() {
  generateHTML();
});

generateHTML();


function generateHTML() {
  var searchTerms = $search.val().trim()
  searchTerms = searchTerms ? searchTerms.split(' ') : []
  
  array.sort(function(a,b){
  	return terms(b) - terms(a)
  })
  
  function terms(a) {
  	return searchTerms.reduce(function(prev,cur) {
    	return src(a, cur) 
    }, 0)
  }
  
  function src(a,el) {
   return a.join(' ').indexOf(el) != -1 ? 1 : 0
  }
  
	var list = array.map(function(el) {
  	return '<li>' +
    	el.map(function(el2) {
      	return '<div>'+ replace(el2) +'</div>'
      }).join('') +
    '</li>'
  }).join('');
	
  function replace(el) {
    var res = el 
  	searchTerms.forEach(term => res = res.replace(new RegExp(term,'g'),'<b>' + term + '</b>'))
    return res
  }

  $('#blocks').html('<ol>'+list + '</ol>');
}