Как выделить поиск, используя код ниже? - PullRequest
Новая
       14

Как выделить поиск, используя код ниже?

0 голосов
/ 04 июля 2019

Код ниже уже выполняет поиск букв между литерами.И я хотел выделить буквы в исследованиях в li.Возможно ли использовать код ниже? 

<input type="search" id="catInput">
<ul id="myUl">
<li>Hello</li>
<li>Test</li>
<li>Javascript</li>
</ul>
<span id="total"></span>

<script>
var ip = document.getElementById('catInput');
var ul = document.getElementById('myUl');
var li = ul.getElementsByTagName('li');

document.getElementById('total').innerHTML = "" + (li.length) + "";
ip.addEventListener('input', function() {
  var val = this.value.toUpperCase(), idx = 0;
  for (var i = 0; i < li.length; i++) {
    var txt = li[i].textContent.toUpperCase();
    if (txt.indexOf(val) != -1) {
      li[i].style.display = '';
      idx++;
    } else {
      li[i].style.display = 'none';
    }
    if (idx == 0) {
        document.getElementById('total').innerHTML = "No results";
    }else{
        document.getElementById('total').innerHTML = idx;
    }
  }
});
</script>

1 Ответ

0 голосов
/ 04 июля 2019

Добавьте этот код в условие if (textIndex != -1) {}, он добавит тег mark к согласованному входу: 

const rgxVal = `(${val})`;
const rgx = new RegExp(rgxVal, 'gi');
li[i].innerHTML = txt.replace(rgx, `<mark>$1</mark>`);

Я также удалил toUpperCase()от txt и val и добавляйте его только при тестировании на совпадение: 

const textIndex = txt.toUpperCase().indexOf(val.toUpperCase());
if (textIndex != -1) {
  ...

Демо: 

var ip = document.getElementById('catInput');
var ul = document.getElementById('myUl');
var li = ul.getElementsByTagName('li');

document.getElementById('total').innerHTML = "" + (li.length) + "";
ip.addEventListener('input', function() {
  var val = this.value, idx = 0;
  for (var i = 0; i < li.length; i++) {
    var txt = li[i].textContent;
    
    if(val) {
      var textIndex = txt.toUpperCase().indexOf(val.toUpperCase());
      if (textIndex != -1) {
        li[i].style.display = '';
        const rgxVal = `(${val})`;
        const rgx = new RegExp(rgxVal, 'gi');
        li[i].innerHTML = txt.replace(rgx, `<mark>$1</mark>`);
        idx++;
      } else {
        li[i].style.display = 'none';
      }
    } else {
      idx = 3;
      li[i].style.display = '';
      li[i].innerHTML = txt;
    }
  }
  if (idx == 0) {
     document.getElementById('total').innerHTML = "No results";
  } else{
     document.getElementById('total').innerHTML = idx;
  }
});
<input type="search" id="catInput">
<ul id="myUl">
<li>Hello</li>
<li>Test</li>
<li>Javascript</li>
</ul>
<span id="total"></span>
...