Jquery搜索文本高亮问题
提问于 2017-08-03 01:00:04
只需打开小提琴，在搜索框中键入'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中使用的任何查询，请在评论中询问我。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-03 01:35:54
这里的问题是，$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中。
这是最后一个小提琴，如果您需要进一步的解释，请告诉我。
Stack Overflow用户
发布于 2017-08-03 01:27:04
而不是
$li.addClass('searchActiveLi');使用
$li.each(function(){
if($(this).find('li').length <= 1){
$li.addClass('searchActiveLi');
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45479529
复制
腾讯云开发者
