Jquery搜索文本高亮问题

Question

只需打开小提琴并在搜索框中输入“rima”，然后按向下箭头，这里所有 li 标签都在选择，但它应该选择搜索词等于 li 文本的位置。

这是我的 DEMO 和代码。

jQuery

var $expandBtns = $('.expandBtn');
var $span;

//Search    
$('input#catInput').keyup(function(e) {
  var searchTerms = $(this).val();
  console.log('Input change');
  if (searchTerms == '') {
    $expandBtns.each(function() {
      var $subList = $(this).siblings('ul');
      $subList.hide('slow');
    });
  }
  $('#orgCat li').each(function() {
    var $li = $(this);
    var hasMatch = searchTerms.length == 0 || $li.text().toLowerCase().indexOf(searchTerms.toLowerCase()) > 0;
    $li.toggle(hasMatch).removeClass('searchActiveLi');

    if ($li.is(':hidden')) {
      $li.closest('ul').show('slow');
    }

    if(e.keyCode == 40 && searchTerms.length !=0){ //highlighting selected li using down arrow key
        $li.addClass('searchActiveLi');
    }    
  });

以上代码是我在 Fiddle 中使用的任何问题，请在 cmets 中问我。

Answer 1

这里的问题是$li.text()会返回<li></li>之间的内容，即使里面有<ul></ul>。

示例

<ul id="outerUl">
  <li id="test">
   <ul>
    <li> foo </li>
    <li> bar </li>
   </ul>
  </li>
 </ul>
 $('#test').text(); //<== This will out put : foo bar
 //So, if i do $('#test').text().toLowerCase().indexOf("foo") it will return a real index of "foo" !

所以你要做的是检查最后一个孩子是否包含你正在寻找的单词：

if(e.keyCode == 40 && searchTerms.length !=0){ //highlighting selected li using down arrow key
    if($li.children('ul').length <= 0) //<== If the li does not contain any other list
        $li.addClass('searchActiveLi');
}    

这是您更新后的Fiddle

更新：

我找到了一种使用匹配文本突出显示li 并将其内容放入搜索框中的方法：

if(e.keyCode == 40 && searchTerms.length !=0 && matched.length > 0){ //highlighting selected li using down arrow key
 if(arrowDownClick < matched.length){
    if(arrowDownClick > 0)
    matched[arrowDownClick - 1].removeClass('searchActiveLi');
    var $selectedli = matched[arrowDownClick];
  $selectedli.addClass('searchActiveLi');
  var selectedliText = $selectedli.text();
  $('input#catInput').val(selectedliText);
  arrowDownClick++;
 }else{
    matched[arrowDownClick - 1].removeClass('searchActiveLi');
    arrowDownClick = 0;
 }
}    

为此，我使用数组matched 来存储每次搜索框的值更改时匹配的li。但是当用户点击down arrow时，脚本会处理匹配到的li的表，并从选中的li中删除.searchActiveLi类并添加到下一个。

这是最后的Fiddle，如果您需要进一步解释，请告诉我。

Answer 2

而不是

$li.addClass('searchActiveLi');

使用

 $li.each(function(){
    if($(this).find('li').length  <= 1){
     $li.addClass('searchActiveLi');
    }
   })