Hallo ich baue ein Projekt, das eine Seitennavigation und Suchleiste in jQuery hat.jQuery Suchfunktion
Ich kann meine Suchfunktion nicht richtig funktionieren und ich bin mir nicht sicher, ob es ein Problem mit dem ID-Element oder der jeweiligen Funktion ist. Ich bekomme die ("Sorry, no student's found!") Nachricht für alles, was passt oder nicht stimmt. Also ich denke, dass es ein Problem mit der if-Anweisung geben könnte, die nach einer Übereinstimmung in der Suchfunktion sucht - aber nicht sicher.
Ich füge dynamisch ein Suchfeld so zu meinem html:
function appendSearchBox(){
var search = "<div class='student-search'><input id='search' placeholder='Search for students...'><button>Search</button></div>"
$(".students").after(search);
// Add click event handler
$("button").click(function() {
searchList();
});
}
das ist, was meine html für eine Liste von Studenten wie folgt aussieht:
<div class="page">
<div class="page-header cf">
<h2 class="students">Students</h2>
</div>
<ul class="student-list">
<li class="student-item cf">
<div class="student-details">
<img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg">
<h3>iboya vat</h3>
<span class="email">[email protected]</span>
</div>
<div class="joined-details">
<span class="date">Joined 07/15/15</span>
</div>
</li>
</ul>
Und dann ist hier die tatsächliche Suchfunktion:
var listStudents = $(".student-list li");
var numStudents = listStudents.length;
function searchList() {
var matched = [];
// Obtain the value of the search input
input = $("#search").val()
// remove the previous page link section
$('.pagination').hide();
// Loop over the student list, and for each student…
listStudents.each(function(){
// ...obtain the student’s name…
var name = $(this).find("h3").val();
// ...and the student’s email…
var email = $(this).find(".email").val();
// ...if the search value is found inside either email or name…
if (name.includes(input) || email.includes(input)) {
// ...add this student to list of “matched” student
matched.push($(this).parent());
}
});
// If there’s no “matched” students…
if (matched.length === 0){
// ...display a “no student’s found” message
var message = ("Sorry, no student's found!");
$(".student-list").hide();
$(".student-list").after(message);
if (matched.length > 10) {
// ...call appendPageLinks with the matched students
appendPageLinks(matched);
}
// Call showPage to show first ten students of matched list
showPage(1, matched);
}
}
Funktionen hinzufügen, die tatsächlich die Schüler zeigen und Navigation hinzufügen
function showPage(pageNum, listStudents) {
// first hide all students on the page
pageNum = parseInt(pageNum);
listStudents.hide();
// Then loop through all students in our student list argument
listStudents.each(function(index){
// if student should be on this page number
if ((index >= ((pageNum*10)-9)) && (index <= (pageNum*10))) {
// show the student
$(this).show();
}
});
}
function getNumPages(numStudents){
numPages = Math.ceil(numStudents/10);
return numPages;
}
function appendPageLinks(numStudents) {
// determine how many pages for this student list
pages = getNumPages(numStudents);
// create a page link section
var nav = "<div class='pagination'><ul>"
for (i=1; i<pages+1; i+=1){
nav += ("<li>" + "<a href='#' id=" + i + ">" + i + "</a>" + "</li>");
};
nav += ("</ul></div>");
$(".student-list").after(nav);
// define what happens when you click a link
var active = $('.pagination a').click(function(){
// Use the showPage function to display the page for the link clicked
var id = $(this).attr('id');
showPage(id,listStudents);
// mark that link as “active”
active.removeClass('active');
$(this).addClass("active");
});
}
hier, wie ich die Funktionen nenne:
appendSearchBox();
showPage(1, listStudents);
appendPageLinks(numStudents);
UPDATE - ich den Code geändert haben den val zu entfernen und setzen in den Text zu greifen.
Nicht sicher, was Problem ist, aber es erscheint, wenn ich eine korrekte Übereinstimmung habe - es funktioniert (seit Seitennummerierung verschwindet), aber die Schüler ändern sich nicht auf der Seite. Wenn es keine Übereinstimmung gibt, dann erhalte ich die Fehlermeldung, aber die Fehlerkonsole sagt
Uncaught TypeError: listStudents.hide is not a function
at showPage (main.js:8)
Ich bin nicht sicher, ob dies irgendwie verwandt ist, wie ich das Bestehen der ‚angepassten‘ Liste?
es funktionieren sollte ... vielleicht ist es ein Problem, über Gehäuse? vielleicht sollten Sie die 'includes' als Großbuchstaben ändern. 'if (name.toUpperCase(). includes (input.toUpperCase()) || email.toUpperCase(). includes (input.toUpperCase()))' –
Der Parameter 'listStudents' in' showPage' ist ein Array (passendes Array). Um alle Schüler zu verstecken, benutze '$ (". Student-list li "). Hide();' anstelle von 'listStudents.hide();' –
wenn ich das tue - es werden immer noch keine Übereinstimmungen angezeigt (ohne Fehler) - aber eine schlechte Suche bietet eine neue FehlerlisteStudents.each ist keine Funktion –