错误消息追加只有一次

我试图追加一个错误消息到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(); 
});

感谢，阿丽娜

来源

2017-04-22 Alina Antemir

我做了一个演示给你，我希望这是你想要什么： https://jsfiddle.net/jondion/xpdof2jh/14/

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

当输入为空时，重置.error。

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

来源

2017-04-22 11:51:43

工作得很好！我只是将变量'found'添加到我的代码和'if'语句中。我现在唯一的问题是，一旦我删除当前搜索并键入另一个搜索，错误文本将被追加并添加到页面两次。有没有办法让输入变空后错误消息消失？非常感谢你的帮助！ –

完美我更新了我的安纳尔 –

嗨乔纳森，你又是一个明星！感谢您的帮助。它运行良好，但它有一些错误。似乎只有当我第一次搜索未找到的学生，如果我第一次有匹配的学生作为结果，并且在我再次搜索一个不存在的信息不显示的情况下，该信息才会出现。相反，即使我搜索它显示的现有学生，但它不应该。所以它只认识到'发现'只是一次错误，除非我刷新页面。我在我的问题中更新了我的代码，我必须在那里做错了...... :(请帮助 –

错误消息追加只有一次

回答

相关问题