0
嗨，我正在建立一個項目，在jQuery中有一個頁面導航和搜索欄。jQuery搜索功能
我無法讓我的搜索功能正常工作，我不確定它是否是ID元素或每個功能的問題。我收到（「對不起，沒有學生髮現！」）消息，表示任何事情是或不是匹配。所以我認爲if語句在搜索功能中尋找匹配可能存在問題 - 但不確定。
我動態地添加一個搜索框到我的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();
});
}
這是我的HTML看起來像學生名單：
<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>
然後這裏是實際搜索功能：
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);
}
}
添加實際顯示學生並添加導航的功能
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");
});
}
這裏是我如何調用該函數：
appendSearchBox();
showPage(1, listStudents);
appendPageLinks(numStudents);
更新 - 我已經改變了代碼刪除VAL，放在搶文本。
不知道是什麼問題，但它出現如果我有一個正確的匹配 - 它工作（因爲分頁消失），但學生不會在頁面上更改。如果沒有匹配的話，我得到錯誤信息，但錯誤控制檯說
Uncaught TypeError: listStudents.hide is not a function
at showPage (main.js:8)
我不知道如果這是某種聯繫我如何傳遞的「匹配」列表？
它應該工作......也許這是一個關於外殼問題？也許你應該將'includes'修改爲大寫。 if（name.toUpperCase（）。includes（input.toUpperCase（））|| email.toUpperCase（）。includes（input.toUpperCase（）））' –
'showPage'方法中的'listStudents'參數是一個數組匹配數組）。隱藏所有學生使用'$（「。student-list li」）。hide（）;'而不是'listStudents.hide（）;' –
當我這樣做 - 沒有匹配出現（沒有錯誤） - 但一個不好的搜索提供了一個新的錯誤listStudents.each不是一個函數 –