[jQuery] Hello, World!

01／tooltip

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
 <!-- Bootstrap css -->
<link rel="stylesheet" href="1.11.4/jquery-ui.css" />
<script src="2.1.4/jquery.min.js"></script>
<script src="1.11.4/jquery-ui.min.js"></script>
<!-- Javascript -->
<script>
 $(function() {
    $("#tooltip-1").tooltip();
    $("#tooltip-2").tooltip();
 });
</script>
</head>
<body>
    <!-- HTML --> 
     <label for="name">Name:</label>
     <input id="tooltip-1" title="Enter You name">
     <p><a id="tooltip-2" href="#" title="Nice tooltip">
        I also have a tooltip
     </a></p>
</body>
</html>

02／Pagination (一次撈足資料筆數，再切分頁)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>Title of the document</title>
<style>
.pagination {
  display: inline-block;
  padding: 0;
  margin : 0;
}
.pagination li {
  display:inline-block;
}
.pagination li a {
  color          : #337AB9;
  float          : left;
  padding        : 8px 16px;
  text-decoration: none;
  transition     : background-color .3s;
  border         : 1px solid #ddd;
}
.pagination li a.active {
  background-color: #4CAF50;
  color           : white;
  border          : 1px solid #4CAF50;
}
.pagination li a:hover:not(.active) {
  background-color: #EEEEEE;
}
</style>
</head>
<body>
<div id="test-list">
  <input type="text" class="search" />
  <ul class="list">
    <li><p class="name">Guybrush Threepwood</p></li>
    <li><p class="name">Elaine Marley</p></li>
    <li><p class="name">LeChuck</p></li>
    <li><p class="name">Stan</p></li>
    <li><p class="name">Voodoo Lady</p></li>
    <li><p class="name">Herman Toothrot</p></li>
    <li><p class="name">Meathook</p></li>
    <li><p class="name">Carla</p></li>
    <li><p class="name">Otis</p></li>
    <li><p class="name">Rapp Scallion</p></li>
    <li><p class="name">Rum Rogers Sr.</p></li>
    <li><p class="name">Men of Low Moral Fiber</p></li>
    <li><p class="name">Murray</p></li>
    <li><p class="name">Cannibals</p></li>
    <li><p class="name">Guybrush Threepwood</p></li>
    <li><p class="name">Elaine Marley</p></li>
    <li><p class="name">LeChuck</p></li>
    <li><p class="name">Stan</p></li>
    <li><p class="name">Voodoo Lady</p></li>
    <li><p class="name">Herman Toothrot</p></li>
    <li><p class="name">Meathook</p></li>
    <li><p class="name">Carla</p></li>
    <li><p class="name">Otis</p></li>
    <li><p class="name">Rapp Scallion</p></li>
    <li><p class="name">Rum Rogers Sr.</p></li>
    <li><p class="name">Men of Low Moral Fiber</p></li>
    <li><p class="name">Murray</p></li>
    <li><p class="name">Cannibals</p></li>
  </ul>
  <ul class="pagination"></ul>
</div>
<script src="js/jquery.min.js"></script>  
<script src="js/list.js"></script>
<script src="js/list.pagination.js"></script>
<script>
var monkeyList = new List('test-list', {
  valueNames: ['name'],
  page: 8,
  plugins: [ ListPagination({}) ] 
});
</script>
</body>
</html>

03／Autocomplete (google搜尋)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<title>Title of the document</title>
<link rel="stylesheet" href="jquery-ui.css">
<style>
.ui-autocomplete {
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size : 16px;
}
</style>
<script src="jquery_2.1.4.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
  $('#fruit').autocomplete({
    source: "auto.php",
    minLength: 1,
    select: function (event, ui) {                    
      $("#txtColor").val(ui.item.Color);
      $("#txtEn").val(ui.item.En);
      $("#txtDesc").val(ui.item.Desc);
      $("#txtStar").val(ui.item.Star);
    }
  });
});
</script>
</head>
<body>
<p><label>請輸入水果名稱： </label><input id="fruit" name="fruit" /></p><hr/>
<p><label>這個水果的顏色： </label><span id="txtColor" /></p>
<p><label>這個水果的英文名稱： </label><input id="txtEn" /></p>
<p><label>這個水果的描述： </label><input id="txtDesc" /></p>
<p><label>這個水果的喜好程度： </label><input id="txtStar" /></p>
</body>
</html>

auto.php

<?php

#----------------------------------------------------
# from: http://docs.jquery.com/UI/Autocomplete
# the local data can be a simple array of strings,
# or it contains objects for each item in the array,
# with either a 'label' or 'value' property, or both.
#----------------------------------------------------
$ak = array('label' => '蘋果', 'Color' => '紅色', 'En' => 'Apple' , 'Desc' => '圓圓的'   , 'Star' => '★★★☆☆');
$al = array('label' => '香蕉', 'Color' => '黃色', 'En' => 'Banana', 'Desc' => '長長的'   , 'Star' => '★☆☆☆☆');
$ar = array('label' => '葡萄', 'Color' => '紫色', 'En' => 'Grape' , 'Desc' => '一顆一顆的', 'Star' => '★★★★★');

$arr[0] = $ak;
$arr[1] = $al;
$arr[2] = $ar;

# echo the json data back to the html web page
echo json_encode($arr);

?>

☞ How to Create a jquery-ui Autocomplete Step by Step
☞ AJAX autocomplete with jQuery, PHP, and JSON
☞ jQuery UI autocomplete- no results message
☞ How to highlight input words in autocomplete jquery ui

〔範例下載〕

☞ ajaxForm()
☞ Pagination (一次撈足資料筆數，再切分頁)
☞ JQuery 日期時間選擇器
☞ kendo 日期時間選擇器
☞ jQuery Nice Select

---

Image Source

☞ To learn or not to learn jQuery?