Question

要求： 按下向下箭头时，应突出显示匹配条款的第一个li，并将其内容放在搜索框中？如果我再次按下向下箭头，等等......

以下是 DEMO

问题： 在上面的演示中，当我按下箭头时，它选择所有最后的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
    if($li.children('ul').length <= 0)
        $li.addClass('searchActiveLi');
      $('#catInput').val($('.searchActiveLi').text());
    }    
  });

  /*if(e.keyCode == 40 && searchTerms.length != 0){
  //alert(searchTerms);
  var m = $('.expandBtn:contains("'+searchTerms+'")').text();
  alert(m);
  $that = $('#orgCat li');
  $('#orgCat .searchActiveLi').removeClass('searchActiveLi');
  $that.addClass('searchActiveLi');
  }
  */
});

从最近两天我尝试但没有用，请帮帮我

Answer 1

这可能是你想要实现的目标

Demo

if (e.keyCode == 40 && searchTerms.length != 0) { //highlighting selected li using down arrow key
  if ($li.children('ul').length <= 0)
    if ($li.text().toLowerCase().indexOf(searchTerms.toLowerCase()) > -1) {
      $li.addClass('searchActiveLi');
    }
  $('#catInput').val($('.searchActiveLi').text().trim());
}

这将检查li是否包含搜索词，如果是，则将类添加到li。

Jquery使用箭头键填充所选文本的搜索框问题

1 个答案: