Чтобы сделать поиск нечувствительным к регистру, вы можете использовать регулярное выражение, чтобы найти критерий поиска в тексте каждого .box.
Кроме того, это регулярное выражение можно использовать для подсчета количества совпадений в .box, а затем sort() по этому значению после завершения l oop.
Обратите внимание, что в приведенном ниже примере я добавил значение 'Crabapple' к одному из блоков, к которому у него есть два экземпляра 'apple' для поиска. Это всегда будет приводить к этому результату.
Наконец, обратите внимание, что я добавляю вызов к empty() результату каждый раз, когда выполняется новый поиск. Предыдущие результаты поиска не были удалены в исходном примере.
let $results = $('.search-results');
$("#search-submit").on("click", function() {
let searchArray = $("#search-input").val().trim().split(' ');
$results.empty();
searchArray.forEach(function(word) {
$(".box").each(function() {
let re = new RegExp(word, 'gi');
let matches = ($(this).text().match(re) || []).length;
if (matches != 0) {
$(this).clone(true).appendTo($results).data('matches', matches);
}
});
});
$results.find('.box').sort((a, b) => $(a).data('matches') < $(b).data('matches') ? 1 : -1).appendTo($results);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input id="search-input" type="text" value="apple" />
<input id="search-submit" type="submit" value="Submit" />
</div><br/>
<div class="search-results"></div><br/>
<div class="box">Apples Banana Blueberries</div>
<div class="box">Cherries Pineapple Strawberries Crabapple</div>
<div class="box">Lemon Mango Orange</div>
Обновление
Учитывая изменение вопроса, вы можете изменить приведенную выше логику c, чтобы построить единый регулярное выражение, которое оценивает все слова, введенные одновременно:
let $results = $('.search-results');
$("#search-submit").on("click", function() {
$results.empty();
let exp = $("#search-input").val().trim().replace(/\s+/g, '|');
let re = new RegExp(exp, 'gi');
$(".box").each(function() {
let matches = ($(this).text().match(re) || []).length;
if (matches != 0) {
$(this).clone(true).appendTo($results).data('matches', matches);
}
});
$results.find('.box').sort((a, b) => $(a).data('matches') < $(b).data('matches') ? 1 : -1).appendTo($results);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input id="search-input" type="text" value="Lemon Pineapple Orange" />
<input id="search-submit" type="submit" value="Submit" />
</div><br/>
<div class="search-results"></div><br/>
<div class="box">Apples Banana Blueberries</div>
<div class="box">Cherries Pineapple Strawberries</div>
<div class="box">Lemon Mango Orange</div>