jquery搜索文本高亮问题

只需打开小提琴并在搜索框中键入'rima'，然后按下箭头，这里所有的li标签都在选择，但它应该选择搜索词在哪里等于li文本。jquery搜索文本高亮问题

这是我的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'); 
    }  
    });

上面的代码是我在我的小提琴使用任何疑问，请咨询我的意见。

来源

2017-08-03 nani0077

是$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" !

所以，你所要做的是检查，如果最后孩子conatines你正在寻找的字：

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，请告诉我，如果您需要任何进一步的解释。

来源

2017-08-03 09:35:54

谢谢@Hamza Abdaoui，它的工作，但一旦键入'ri'，并检查它选择所有的孩子。它应该单独选择它意味着添加选择li的类 – nani0077

https://jsfiddle.net/nelsonfeel/420Lf338/16/检查所有名称显示在搜索框中。 – nani0077

@ nani0077，我不明白需要什么！你想添加类只有第一个'li'，然后如果我再次按向下箭头它选择下一个'li'？ –

代替

$li.addClass('searchActiveLi');

使用

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

来源

2017-08-03 09:27:04 jidexl21

这是工作和选择李的组，但它应该选择一个李只有 – nani0077

jquery搜索文本高亮问题

回答

相关问题