jquery搜索单词，但以第一个字母开头并非所有字母

Question

如何搜索UI的内容，并且如果名字以该字母开头，则只返回该值。例如，在下面的小提琴中，当我输入字母H时，我只想显示：

Henrik Lundqvist
Victor Hedman

现在不是所有包含字母H的单词都是这样的：

Henrik Lundqvist
John Klingberg
Shea Weber
Victor Hedman

http://jsfiddle.net/h48157ck/7/

<input type="text" id="filter" placeholder="Player Search" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Player Search'" />
<ul>
    <li>Henrik Lundqvist</li>
    <li>M. Fleury</li>
    <li>J.T. Miller</li>
    <li>Mikael Granlund</li>
    <li>John Klingberg</li>
    <li>Shea Weber</li>
    <li>Ryan Suter</li>
    <li>O. Ekman-Larsson</li>
    <li>Victor Hedman</li>
    <li>Justin Faulk</li>
</ul>

jQuery.expr[':'].containsLower = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

$('#filter').keyup(function(){
    $('ul li').hide().filter(':containsLower("'+this.value+'")').show();
    //$(':input').removeAttr('placeholder');
});

Answer 1

这样的东西？

jQuery.expr[':'].containsLower = function(a, i, m) {
  if (m[3] === '') return true;
  var x = jQuery(a).html().toUpperCase().split(' ');
  console.log(x);
  for (var i = 0; i < x.length; i++) {
    if(x[i][0] === m[3].toUpperCase()) {
        return true;
     }
  }
  return false;
};

$('#filter').keyup(function(){
    $('ul li').hide().filter(':containsLower("'+this.value+'")').show();
    //$(':input').removeAttr('placeholder');
});

http://jsfiddle.net/h48157ck/10/

Answer 2

我对正则表达式的建议是：

.player-position {
  margin-top: 10px;
}
.player-position li {
  display: inline;
  background: red;
  cursor: pointer;
  padding: 5px;
}
.available-player {
  margin-top: 10px;
  background: black;
  color: white;
}

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>


<input type="text" id="filter" placeholder="Player Search" onfocus="this.placeholder = ''"
       onblur="this.placeholder = 'Player Search'"/>

<ul class="player-position">
    <li class="qb current">QB</li>
    <li class="rb">RB</li>
    <li class="all">ALL</li>
</ul>

<div class="available-player">
    <div class="qb">
        <ul>
            <li>Henrik Lundqvist</li>
            <li>M. Fleury</li>
            <li>J.T. Miller</li>
            <li>Mikael Granlund</li>
            <li>John Klingberg</li>
        </ul>
    </div>
    <div class="rb" style="display:none;">
        <ul>
            <li>Shea Weber</li>
            <li>Ryan Suter</li>
            <li>O. Ekman-Larsson</li>
            <li>Victor Hedman</li>
            <li>Justin Faulk</li>
        </ul>
    </div>
    <div class="all" style="display:none;">
        <ul>
            <li>Henrik Lundqvist</li>
            <li>M. Fleury</li>
            <li>J.T. Miller</li>
            <li>Mikael Granlund</li>
            <li>John Klingberg</li>
            <li>Shea Weber</li>
            <li>Ryan Suter</li>
            <li>O. Ekman-Larsson</li>
            <li>Victor Hedman</li>
            <li>Justin Faulk</li>
        </ul>
    </div>
</div>

title

Answer 3

// Search Filter
jQuery.expr[':'].containsLower = function (a, i, m) {
  if (m[3] === '') {
    return true;
  }
  var re = new RegExp('(^' + m[3].toUpperCase() + '[^ ]+) | (' + m[3].toUpperCase() + '.*$)');
  return a.textContent.toUpperCase().trim().match(re) != null;
};
$(function () {
  $('#filter').keyup(function (e) {
    $('.available-player .all:visible ul li').hide().filter(':containsLower("' + this.value + '")').show();
  });
  // Tabs
  $('.player-position li').on('click', function (e) {
    $('.available-player>.' + e.target.classList[0]).show().siblings().hide();
    $('#filter').keyup();
  });
  var selector = '.available-player li';
  $(selector).on('click', function () {
    $(this).parent().find('li').removeClass('active');
    $(this).parent().find('li').removeClass('current');
    $(this).addClass('active');
  });
});

.player-position {
  margin-top: 10px;
}
.player-position li {
  display: inline;
  background: red;
  cursor: pointer;
  padding: 5px;
}
.available-player {
  margin-top: 10px;
  background: black;
  color: white;
}

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>


<input type="text" id="filter" placeholder="Player Search" onfocus="this.placeholder = ''"
       onblur="this.placeholder = 'Player Search'"/>

<ul class="player-position">
    <li class="qb current">QB</li>
    <li class="rb">RB</li>
    <li class="all">ALL</li>
</ul>

<div class="available-player">
    <div class="qb">
        <ul>
            <li>Henrik Lundqvist</li>
            <li>M. Fleury</li>
            <li>J.T. Miller</li>
            <li>Mikael Granlund</li>
            <li>John Klingberg</li>
        </ul>
    </div>
    <div class="rb" style="display:none;">
        <ul>
            <li>Shea Weber</li>
            <li>Ryan Suter</li>
            <li>O. Ekman-Larsson</li>
            <li>Victor Hedman</li>
            <li>Justin Faulk</li>
        </ul>
    </div>
    <div class="all" style="display:none;">
        <ul>
            <li>Henrik Lundqvist</li>
            <li>M. Fleury</li>
            <li>J.T. Miller</li>
            <li>Mikael Granlund</li>
            <li>John Klingberg</li>
            <li>Shea Weber</li>
            <li>Ryan Suter</li>
            <li>O. Ekman-Larsson</li>
            <li>Victor Hedman</li>
            <li>Justin Faulk</li>
        </ul>
    </div>
</div>