js jquery搜索并在键入名称时保持可见

js jquery searching and leaving visible when typing name

本文关键字：搜索 jquery js      更新时间：2023-09-26

我的html中有这段代码：

<form>
        <div style="width:530px; height:220px; overflow-y:scroll;">
              <div class="people">
                <label class="checkbox_1" for="1">
                  <img src="1.jpg" />
                  <span>
                    Jolly Bob Monumir
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="1" id="1" />
              </div>
              <div class="people">
                <label class="checkbox_1" for="2">
                  <img src="2.jpg" />
                  <span>
                    Jonathan Monumir
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="2" id="4" />
              </div>
              <div class="people">
                <label class="checkbox_1" for="3">
                  <img src="3.jpg" />
                  <span>
                    Misoury Crow
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="3" id="3" />
              </div>
              <div class="people">
                <label class="checkbox_1" for="4">
                  <img src="4.jpg" />
                  <span>
                    Michael Crow
                  </span>
                </label>
                <input type="checkbox" name="people[]" value="4" class="checkbox_1" id="4" />
              </div>
        </div>                
    </form>

页面加载后，应显示整个表单。现在我想要输入框，当我在这个框中输入人名的字母时，它应该自动留下那些包含我键入的字母的名字(带有类"人"的div(。

示例：我键入"Jo"，应该显示带有Jolly Bob Monumir和Jonathan Monumir的div，其他应该保持隐藏状态。然后当我输入"Cro"时，Misoury Crow和Michael Crow应该可见。我如何使用jquery做到这一点？提前致谢

更新：我找到了这个，它就像一个魅力！

$('#search-criteria').on('keyup', function(){
    $('div.people').hide();
    var txt = $('#search-criteria').val();
    $('div.people').each(function(){
       if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
           $(this).show();
       }
    });
});

我认为您正在寻找类似jqueryui的自动完成功能。

我添加了一个input字段，您可以在其中键入：

<input type="text" id="people_name">

jQuery代码是：

$('input#people_name').on('keyup', function() {
  var value = this.value.trim();
    if(value.length) {
        $('div.people span').filter(function() {
            return new RegExp(value, 'i').test($(this).text());
        }).closest('div.people').show();
    } else $('div.people').hide();
});

演示

注意：您可以使用任何自动完成插件。

更新：我找到了这个，它就像一个魅力！

$('#search-criteria').on('keyup', function(){
    $('div.people').hide();
    var txt = $('#search-criteria').val();
    $('div.people').each(function(){
       if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
           $(this).show();
       }
    });
});
相关文章：