Question

我尝试在搜索栏中没有匹配项时向html附加错误消息。我有一个列表，一旦没有匹配，列表项就会显示：none;那是我想要留言的时候。问题是，在循环内循环遍历列表，此消息的附加次数与列表项的次数相同。

更新的代码：似乎每当我搜索不匹配的学生时都不会出现错误消息...除非我刷新页面。有时即使我有匹配的学生，错误显示虽然它不应该。

    //add search bar 
$( ".page-header" ).append('<div class="student-search"></div>');
$( ".student-search" ).append('<input id="input-search" placeholder="Search for students..."/><button id="search">Search</button>');
$('.page').append('<div class="error"></div>'); 
$('.error').append('<p>"Student not found!"</p>');
$('.error').hide(); 
var found = true;



//myFunction
function myFunction() {
    var input = document.getElementById("input-search");
    var filter = input.value.toUpperCase();
    var ul = document.getElementsByClassName("student-list");
    var li = document.getElementsByTagName("li");

    for (var i = 0; i < li.length; i++) { 
        var h = li[i].getElementsByTagName("h3")[0];
        if (h.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
            found = true;  
        } else {
            li[i].style.display = "none";
            console.log('Hello! Student is not found!');
            found = false;  
            }        
    }
    $('.pagination').hide();
    if (found === false) {
        $('.error').show();
    } 
}
//myFunction end

// when the input is empty return to page 1, empty the error div, show pagination, 

$('#input-search').on('keyup', function() {
 if($(this).val() === '') {
   $('.error').empty();
   go_to_page(0);
   $('.pagination').show();
  }
});


$('#search').click(function(){
      myFunction();
});

谢谢，阿丽娜

Answer 1

我为你做了一个演示，我希望它是你想要的： https://jsfiddle.net/jondion/xpdof2jh/14/

首先，每次用户进行搜索时，我们都需要删除所有以前的错误。我添加了一个变量found来跟踪用户名是否与过滤器匹配。我添加了显示搜索结果的条件。

输入为空时重置.error。

$('input').on('keyup', function() {
 if($(this).val() === '') {
   $('.error').empty()
  }
});

错误消息仅追加

1 个答案: