codes for seabook
1. ajax test
2.jqueryui autocomplete
index.html
search.php
1. ajax test
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax test</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(function(){
$("input").click(function(){
dom = $(this).parent().siblings(".data");
uid = $(this).parent().siblings(".uid").html();
$.getJSON("http://www.1ong1.com/demo/jsonp-callback-service.php?callback=?",
function(data){
dom.html(data.Contact[uid].Via);
});
});
});
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="uid">0</th>
<td class="data">fk</td>
<td><input type="button" value="Update" /></td>
</tr>
<tr>
<th class="uid">1</th>
<td class="data">fu</td>
<td><input type="button" value="Update" /></td>
</tr>
</table>
</body>
</html>
2.jqueryui autocomplete
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqueryui autocomplete</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script src="http://www.jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://www.jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://www.jqueryui.com/ui/jquery.ui.position.js"></script>
<script src="http://www.jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
</head>
<body>
<script>
$(function() {
$.ajax({
type: "GET",
url: "search.php",
dataType: "script",
success: function( data ) {
$( "#tags" ).autocomplete({
source: availableTags
});
}
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->
</body>
</html>
search.php
<?php
echo ' var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];';