彰化一整天的論壇

 找回密碼
 立即註冊
查看: 20|回復: 0

【轉貼】使用PHP&MySQL配合jQuery UI Autocomplete實作自動完成功能

[複製鏈接]
發表於 2018-11-2 22:15:45 | 顯示全部樓層 |閱讀模式
會想介紹此篇,最起初是看到Google搜尋的時候,好奇心驅使下,想去找看看實作原理
還去搜尋了「PHP Google關鍵字」等字樣,查詢後才知道原來這個功能叫做「自動完成(Autocomplete)」
而此篇是藉由以下的參考資料來去修改實作,並簡化過程一步一步解說,好讓各位讀者可以了解運作流程
(參考資料:http://www.wowww.nl/2014/02/01/jquery-autocomplete-tutorial-php-mysql/)
由於需要為JSON形式,因此會用到json_encode函數
json_encode():對變數進行JSON編碼
使用方法:json_encode ( $value )
$value:待編碼的值,該函數只能接受UTF-8 編碼的資料
(參考資料:http://php.net/manual/en/function.json-encode.php)
自動完成(Autocomplete):根據用戶輸入值進行搜索和過濾,讓用戶快速找到並從列表中選擇所需要的值
而有關使用的參數,列出些許較常用的參數:
appendTo:輸入時提示框追加元素,預設為body
autoFocus:當設置成true時,提示框第一個將會是被選中的狀態,預設為false
delay:載入資料時的延遲時間,預設為300,單位毫秒
disabled:是否在頁面加載後是否禁用autocomplete,預設為false
minLength:輸入多少個字時就會出現提示框,預設為1
(minLength很重要,對於只有少許項目的,可以設置為1;但要是有上千或萬筆資料的話,則建議把數值設置高一點,以免Loading過重)
position:設置提示框的位置
source:設置資料來源,資料來源必須是json形式
close:關閉Autocomplete提示框
destroy:完全移除Autocomplete功能,把元素返回到它的預初始化狀態
(其餘詳細資料可以查看此處:
jQuery UI官方文件:http://api.jqueryui.com/autocomplete/
中文w3cschool.cc jQuery UI API文件:http://www.w3cschool.cc/jqueryui/api-autocomplete.html)
接著,進入實作的部分,以下會列出資料庫與程式碼,供各位讀者可以放在自己環境體驗看看:
資料庫:ithome_test
  1.         <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
  2.         <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  3.         <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  4.       
  5.         <script>
  6.             $(function() {
  7.             $('#auto_autocomplete').autocomplete({
  8.                 source: "search.php",
  9.                 minLength: 1
  10.             });
  11.             });
  12.         </script>
  13.    
  14.    
  15.         請輸入要搜尋的資料(輸入(0 or G)為開頭都會有資料):<input id="auto_autocomplete" type="text"  />
複製代碼
  1. <?php
  2.     $db_local="127.0.0.1";
  3.     $db_username="root";
  4.     $db_passwd="";
  5.     $db_select="ithome_test";

  6.     $conn=mysql_connect($db_local,$db_username,$db_passwd);
  7.     mysql_select_db($db_select);

  8.     $query=mysql_query("SELECT * FROM `good_idea` WHERE `name` like '%" . $_GET['term'] . "%'"); //預設的變數名稱是term
  9.     while($row=mysql_fetch_array($query)){
  10.         $name[] = $row['name'];
  11.     }
  12.     mysql_close();
  13.    
  14.     echo json_encode($name); //輸出的格式必須是json
  15. ?>
複製代碼


回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2018-11-14 16:29 , Processed in 0.226644 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表