过滤自定义HTML列表

Question

我正在处理过滤按首字母分组的客户列表。 以下代码用于html网站。

<ul id="fil" >
 <input type="text" id="input" />

<li id ="group">S</li>
 <li>
<a class="name">sen</a> 
</li>
 <li>
<a class="name">ser</a> 
</li>
<li id ="group">l</li>
 <li>
<a class="name">l</a> 
</li>

我用于过滤的功能在

之下

var filter = input.value.toUpperCase();
var lis = document.getElementById('fil').getElementsByTagName('li');
var name='';

for (var i = 0; i < lis.length; i++) {

    if ( lis[i].className =='') 
    {           
        name = lis[i].getElementsByClassName('name')[0].innerHTML;

        if (name.toUpperCase().indexOf(filter) == 0  )
            lis[i].style.display = 'list-item';
        else
            lis[i].style.display = 'none';
    }
}

我的问题是当我开始输入字母时，例如（“s”），它会过滤所有组类（也是“l”）和“ser”和“sen”。

我只想过滤它的第一个字母和我输入的其余字母。

谢谢...

Answer 1

尝试这样的事情，看起来就像你需要的那样。

var filter = document.getElementById('input');
var lis = [].slice.call(document.querySelectorAll('#fil > li:not(.group)'));

function getGroupByLetter(char) {
    return lis.filter(function(li) {
        return li.textContent.trim()[0] === char;
    });
}

filter.onkeyup = function() {
    getGroupByLetter(this.value[0]).forEach(function(li) {
        li.style.display = li.textContent.indexOf(filter.value) !== -1 ? '' : 'none';
    });
};

.group {background: #EEE;}

<input type="text" id="input" />
<ul id="fil">
    <li class="group">S</li>
    <li><a class="name">sli</a></li>
    <li><a class="name">sen</a></li>
    <li><a class="name">ser</a></li>
    <li class="group">L</li>
    <li><a class="name">last</a></li>
    <li><a class="name">lite</a></li>
</ul>

Answer 2

尝试like this：

$(document).ready(function(){
    $("#input").on("keypress keyup", function(e) {
        var value = String.fromCharCode(e.which);
        filterText($("#input"),value); });
});

function filterText(input, text)
{    
    var lis = $(input).closest('#fil').find('li');
    var lisItem = $(input).closest('#fil').find('.name');

    $(lis).css("display", "list-item");

    if(text != "")
    {
        var filter = text.toUpperCase();
        var name='';

        $(lisItem).each(function() {

                name = $(this).html().toUpperCase();

                if (name[0] == filter)
                    $(this).closest("li").css("display", "list-item");
                else 
                    $(this).closest("li").css("display", "none");
        });
    }
}

Answer 3

这是我的旋转;它考虑了全部价值，而不仅仅是第一个字母。

DEMO

  var lis = [].slice.call(document.querySelectorAll('#fil > li:not(.group)')),
      input = document.getElementById('input'),
      liText,
      hasText,
      len;

  input.onkeyup = function () {
    var value = input.value.toUpperCase(),
        i = 0;

    for (len = lis.length; i < len; i++) {
      liText = lis[i].innerText.toUpperCase();
      hasText = liText.substr(0, value.length) == value;
      lis[i].style.display = hasText
                               ? 'list-item'
                               : 'none';
    }
  }