Question

只需打开小提琴并键入＆＃39; rima＆＃39;在搜索框中然后按向下箭头，这里所有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');
    }    
  });

以上代码是我在我的小提琴中使用的任何疑问，请在评论中询问我。

Answer 1

而不是

$li.addClass('searchActiveLi');

使用

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

Answer 2

此问题是$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的表格，并从所选的.searchActiveLi中删除该类li并将其添加到下一个{{1}}

以下是最终Fiddle，如果您需要进一步说明，请告诉我。

Jquery搜索文本heighlighting问题

2 个答案: