通過JavaScript添加搜索欄

Question

我有一個工作搜索欄，通過html添加。但是，爲了讓代碼不顯眼，我試圖通過JavaScript附加搜索欄和按鈕。我可以顯示搜索欄和按鈕，但提出結果的功能已停止工作。

以下是在JS中添加搜索欄的部分。

var $searchSection = $('<div class="student-search"></div>'); 
$searchSection.append('<input id = "search-criteria" placeholder="Search for students..."></input>'); 
$searchSection.append('<button>Search</button>'); 

//Append search section 
$('.page-header').append($searchSection); 

我想獲得搜索工作的功能。這是一個鏈接到搜索工作的代碼，因爲搜索欄包含在html中。 http://codepen.io/fun/pen/RRyaNm

這是通過js添加搜索欄的代碼的鏈接，但沒有搜索功能。 http://codepen.io/fun/pen/VjraNd?editors=1010

如何通過從js中添加來搜索工作？

任何幫助或指針都會很棒。

謝謝

哈利

Answer 1

您不必添加更多的功能，只需將您的代碼移動到頂部即可。勾選此 的jsfiddle https://jsfiddle.net/xt5193z1/

//Search section 

var $searchSection = $('<div class="student-search"></div>'); 
$searchSection.append('<input id = "search-criteria" placeholder="Search for students..."></input>'); 
$searchSection.append('<button>Search</button>'); 

//Append search section 
$('.page-header').append($searchSection); 


var $studentItem = $('.student-item'); 
var $pagination = $('.pagination'); 
var $searchCriteria = $('#search-criteria'); 
var perPage = 10; 


// count number of student items 
var studentCount = $studentItem.length; 
// number of pages = number of students/10 rounded up 
var pageNumber = Math.ceil(studentCount/perPage); 
// remove all student items 
var initialTen = $studentItem.hide(); 
// display first 10 student items 
initialTen = $studentItem.slice(0, perPage).show(); 
// pagination ul 
var paginationHTML = '<ul>'; 
// calc number of links 
for (var i = 1; i < pageNumber + 1; i++) { 
    // li and link for each page 
    paginationHTML += '<li><a href ="#">' + i + '</a></li>'; 
} 
// end of ul 
paginationHTML += '</ul>'; 
// display list to page 
$pagination.html(paginationHTML); 
// pagination link click 
$('.pagination li a').on('click', function() { 
    // remove active 
    $('.pagination li a.active').removeClass('active'); 
    // add active class 
    $(this).addClass('active'); 
    // page number of clicked 
    var pageNum = this.text; 
    // Start point for slice 
    // e.g 3 * 10 
    var startFrom = pageNum * perPage - perPage; 
    // end point for slice 
    // e.g 30 + 10 
    var endOn = startFrom + perPage; 
    // display students based on number clicked 
    $studentItem.hide().slice(startFrom, endOn).show(); 

}); 





// Error message for no matches found 
var $noMatches = $('<h2>No matches found please try again</h2>'); 
// Add to page 
$('.page').append($noMatches); 
// hide initially 
$noMatches.hide(); 

// search box on type 
$searchCriteria.on('input', function() { 
    // remove all result classes 
    $studentItem.each(function() { 
    $(this).removeClass("result"); 
    }); 

    // value of searched 
    var text = $(this).val().toLowerCase(); 
    // results of search 
    var results = $("ul.student-list li:contains('" + text.toLowerCase() + "')"); 
    results.addClass("result"); 
    // show or hide based on result matching div 
    $studentItem.each(function() { 
    if ($(this).hasClass('result')) { 
     $(this).show("slow"); 
    } else { 
     $(this).hide(); 

    } 

    }); 

    if (results.length > 10) { 

    // remove all student items 
    var initialTen = $studentItem.hide(); 
    // display first 10 student items 
    initialTen = $studentItem.slice(0, perPage).show(); 
    // show pagination 
    $('.pagination').show(); 
    // hide no matches message 
    $noMatches.hide(); 
    } else if (results.length === 0) { 
    $pagination.hide(); 
    $noMatches.show(); 

    } else { 
    $pagination.hide(); 
    } 

}); 

Answer 2

正如Siguza說，$('#search-criteria')在你取它的時候不存在。所以，on功能是一個好主意，但它應該像這樣給出：

$('.page-header').on('input', '#search-criteria', function() { 
    //your code 
}); 

它是什麼，它會在功能結合到動態添加的DOM

這裏是元jsFiidle

它會爲你工作。 :)