Jquery搜索文本高亮问题

Question

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

这是我的演示和代码。

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中使用的任何查询，请在评论中询问我。

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');
}    

这是您更新的小提琴

更新:

我找到了一种用匹配的文本突出显示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并将其添加到下一个li中。

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

Answer 2

而不是

$li.addClass('searchActiveLi');

使用

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