2015年12月14日 星期一

jQuery Autocomplete 使用 PHP 和 MySQL

自動完成(Autocomplete):根據用戶輸入值進行搜索和過濾,讓用戶快速找到並從列表中選擇所需要的值
而有關使用的參數,列出些許較常用的參數:
appendTo:輸入時提示框追加元素,預設為body
autoFocus:當設置成true時,提示框第一個將會是被選中的狀態,預設為false
delay:載入資料時的延遲時間,預設為300,單位毫秒
disabled:是否在頁面加載後是否禁用autocomplete,預設為false
minLength:輸入多少個字時就會出現提示框,預設為1
(minLength很重要,對於只有少許項目的,可以設置為1;但要是有上千或萬筆資料的話,則建議把數值設置高一點,以免Loading過重)
position:設置提示框的位置
source:設置資料來源,資料來源必須是json形式
close:關閉Autocomplete提示框
destroy:完全移除Autocomplete功能,把元素返回到它的預初始化狀態
接著,進入實作的部分,以下會列出資料庫與程式碼,供各位讀者可以放在自己環境體驗看看:
資料庫:ithome_test
SQL語法:
CREATE DATABASE IF NOT EXISTS `ithome_test` DEFAULT CHARACTER SET utf32 COLLATE utf32_unicode_ci;

資料表:good_idea
欄位1:id 型別:int(10) Other:AUTO_INCREMENT
欄位2:name 型別:varchar(50) Other:utf8_unicode_ci
SQL語法:
CREATE TABLE IF NOT EXISTS `good_idea` ( 
`id` int(10) NOT NULL, 
  `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;

資料的話,建立了15筆資料,做簡單的示範
SQL語法:

INSERT INTO `good_idea` (`id`, `name`) VALUES 
(1, '001-Good Idea 1'), 
(2, '002-Good Idea 2'), 
(3, '003-Good Idea 3'), 
(4, '014-Good Idea 14'), 
(5, '015-Good Idea 15'), 
(6, '016-Good Idea 16'), 
(7, '027-Good Idea 27'), 
(8, '028-Good Idea 28'), 
(9, '029-Good Idea 29'), 
(10, '035-Good Idea 35'), 
(11, '036-Good Idea 36'), 
(12, '037-Good Idea 37'), 
(13, 'Good Idea 100'), 
(14, 'Good Idea 200'), 
(15, 'Good Idea 300'); 

auto_complete.php

<html> 
    <head> 
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" /> 
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
        <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script> 
        
        <script> 
            $(function() { 
            $('#auto_autocomplete').autocomplete({ 
                source: "search.php", 
                minLength: 1 
            }); 
            }); 
        </script> 
    </head> 
    <body> 
        請輸入要搜尋的資料(輸入(0 or G)為開頭都會有資料):<input id="auto_autocomplete" type="text"  /> 
    </body> 
</html> 

在<script></script>的部分,關注欄位「auto_autocomplete」使用autocomplete方法,並填寫需要的參數
參數部分,資料來源則是傳送值到為search.php,並取得回傳值
因為範例的資料量很小,所以最小啟用字數minLength設置為1

search.php

<?php 
    $db_local="127.0.0.1"; 
    $db_username="root"; 
    $db_passwd=""; 
    $db_select="ithome_test"; 
 
    $conn=mysql_connect($db_local,$db_username,$db_passwd); 
    mysql_select_db($db_select); 
 
    $query=mysql_query("SELECT * FROM `good_idea` WHERE `name` like '%" . $_GET['term'] . "%'"); //預設的變數名稱是term 
    while($row=mysql_fetch_array($query)){ 
        $name[] = $row['name']; 
    } 
    mysql_close(); 
    
    echo json_encode($name); //輸出的格式必須是json 
?> 

在SQL的部分「"SELECT * FROM `good_idea` WHERE `name` like '%" . $_GET['term'] . "%'"」
jQuery UI AutoComplete在輸入文字時,會將文字以參數term傳送到後端,在做比對資料時會以Get取得比對的資料,並且比對資料後,將要回傳的值以Json形式回傳
而這裡的SQL語法,是查詢值內所有含有$_GET['term']的數值字串

沒有留言:

張貼留言