//wait for our page to be created by jQuery Mobile
$(document).delegate('#page-id', 'pageinit', function() {
//cache the elements we want to show/hide based on the search input
var $filterDivs = $('.filter-div');
//bind an event handler to the search input for when it's value changes
$('#search').bind('keyup change', function() {
//if the value of the input is nothing, then show all the elements
if (this.value == '') {
$filterDivs.slideDown(500);
//otherwise find only the elements that match what's in the search input
} else {
//create a regular expression based on the value of the search input
var regxp = new RegExp(this.value),
//get only the elements that match the search term(s)
$show = $filterDivs.filter(function() {
return ($(this).attr('data-filter').search(regxp) > -1);
});
//hide the elements that do not match
$filterDivs.not($show).slideUp(500);
//and show the elements that do match
$show.slideDown(500);
}
});
});
デモ:ここ
http://jsfiddle.net/jasper/cZW5r/1/は、基本的なHTMLですこれが使用する構造:
属性がdata-filter
であることに注意してください。これらの属性は検索語句に対してチェックされます。
ありがとうございます。 – partialdata