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搜索文本高亮問題

回答

相關問題