小小的種子

2012-06-19

[Jquery][HTML5] 簡單的Search標記 小功能

摘要:[Jquery][HTML5] 簡單的Search標記 小功能

(改編HTML5 完美風暴 呂高旭 範例3-1)

以本書上的範例，改成Jquery的方式，搭配練習使用HTML5 Tag <Mark>

<HTML>
<HEAD>
	<STYLE>
		SPAN{MARGIN:10PX;DISPLAY:BLOCK;}
	</STYLE>
	<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="jquery-1.7.2.min.js"></SCRIPT>
	<SCRIPT>
		var allmovies;
		$(document).ready(function(){
			allmovies = $('#hmovies').html();
		});
		
		function search() {
			$('#hmovies').html(allmovies);
			var movie = $('#searchText').val();
			var movies = $('#hmovies > span').each(function(){
					if($(this).text().indexOf(movie)>-1)
					{
						$(this).html('<mark>'+$(this).text()+'</mark>');
					}
			});
		}
		
	</SCRIPT>
</HEAD>
<BODY>
	<P>輸入完整電影名稱：<INPUT ID="searchText" type="text" />
	<BUTTON ONCLICK="search()">搜尋</BUTTON></P><HR />
	<DIV ID="hmovies">
		<SPAN>Apple</SPAN>
		<SPAN>痞子英雄</SPAN>
		<SPAN>集結號</SPAN>
		<SPAN>風聲</SPAN>
		<SPAN>鋼鐵人</SPAN>
	</DIV>
</BODY>
</HTML>

 

Jquery用起來果然還是很陌生，得要多多練習哩。