[PHP]關鍵字建議列表

小黑-avatar-img
發佈於後端
更新 發佈閱讀 4 分鐘

在欄位輸入關鍵字,就會顯示提示列表。

架構

由HTML表單、jQuery的AJAX和PHP與MySQL組成。

先在HTML的文字輸入欄位,輸入關鍵字,接著會呼叫jQuery的AJAX去伺服器,取得建議列表;伺服器收到需求後,PHP會連接MySQL,取得建議列表,接著會建立JSON文件並回傳。


HTML

文字輸入欄位與關鍵字列表

<input type="TEXT" id="txtSearch" name="txtSearch" autocomplete="off"/>
<input type="SUBMIT" value="搜尋"/><br/>
<div id="result"></div>


jQuery的AJAX請求

//註冊​keyup事件
$("#txtSearch").bind('keyup', function() {
// 取得表單欄位值
var value = $('#txtSearch').val();
// 使用HTTP GET方法送出Ajax請求
$.ajax({
type: 'GET',
url: 'getSuggest.php',
data: { search : value },
success: function(data) {
// 顯示傳回的資料
var result = document.getElementById("result");
result.innerHTML = "";
// 顯示所有JSON陣列的關鍵字清單
$.each(data, function (key, val) {
//資料處理
});
}
});
return false;
});


PHP連接MySQL

// 建立資料庫連接
$link=mysqli_connect("localhost","root","12345678","testsql");
$arr = array();
// 檢查是否有輸入查詢字串
if ( isset($_GET["search"]) && $_GET["search"] != '' ) {
// 處理特殊字元
$search = addslashes($_GET["search"]);
// 建立SQL指令字串
$sql = "SELECT distinct(title) " . "FROM suggest WHERE title LIKE('" . $search . "%') ORDER BY title";
// 執行SQL查詢
$result = mysqli_query($link, $sql);
// 取得記錄資料
while ( $row = mysqli_fetch_row($result) ) {
// 取得欄位值
array_push($arr, $row[0]);
}
}
echo json_encode($arr,JSON_UNESCAPED_UNICODE);//json編碼
mysqli_close($link); // 關閉資料庫連接






留言
avatar-img
留言分享你的想法!
avatar-img
小黑與程式的邂逅
8會員
123內容數
嗨,我是一名程式設計師,會在這分享開發與學習紀錄。
2023/12/11
REST(REpresentational State Transfer)是一種WWW的Web架構,常被使用於JSON或XML的Web服務,而符合REST原則的系統就稱為RESTful。REST API(RESTful API)是一種符合REST的API應用。 方法說明 GET:向伺服器取得
Thumbnail
2023/12/11
REST(REpresentational State Transfer)是一種WWW的Web架構,常被使用於JSON或XML的Web服務,而符合REST原則的系統就稱為RESTful。REST API(RESTful API)是一種符合REST的API應用。 方法說明 GET:向伺服器取得
Thumbnail
2023/12/07
JSON(JavaScript Object Notation)是AJAX(參考:[PHP][AJAX]介紹)常用的資料交換格式。在PHP有提供函數,可以將資料轉換成JSON。除外JSON比XML快速且簡單。 語法 資料是由鍵和值(Key-value)組成。 鍵和值之間用「:」區隔。 資料之
Thumbnail
2023/12/07
JSON(JavaScript Object Notation)是AJAX(參考:[PHP][AJAX]介紹)常用的資料交換格式。在PHP有提供函數,可以將資料轉換成JSON。除外JSON比XML快速且簡單。 語法 資料是由鍵和值(Key-value)組成。 鍵和值之間用「:」區隔。 資料之
Thumbnail
2023/12/07
AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
Thumbnail
2023/12/07
AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
Thumbnail
看更多
你可能也想看
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
在欄位輸入關鍵字,就會顯示提示列表。 架構 由HTML表單、jQuery的AJAX和PHP與MySQL組成。 先在HTML的文字輸入欄位,輸入關鍵字,接著會呼叫jQuery的AJAX去伺服器,取得建議列表;伺服器收到需求後,PHP會連接MySQL,取得建議列表,接著會建立JSON文件並回傳。
Thumbnail
在欄位輸入關鍵字,就會顯示提示列表。 架構 由HTML表單、jQuery的AJAX和PHP與MySQL組成。 先在HTML的文字輸入欄位,輸入關鍵字,接著會呼叫jQuery的AJAX去伺服器,取得建議列表;伺服器收到需求後,PHP會連接MySQL,取得建議列表,接著會建立JSON文件並回傳。
Thumbnail
JSON(JavaScript Object Notation)是AJAX(參考:[PHP][AJAX]介紹)常用的資料交換格式。在PHP有提供函數,可以將資料轉換成JSON。除外JSON比XML快速且簡單。 語法 資料是由鍵和值(Key-value)組成。 鍵和值之間用「:」區隔。 資料之
Thumbnail
JSON(JavaScript Object Notation)是AJAX(參考:[PHP][AJAX]介紹)常用的資料交換格式。在PHP有提供函數,可以將資料轉換成JSON。除外JSON比XML快速且簡單。 語法 資料是由鍵和值(Key-value)組成。 鍵和值之間用「:」區隔。 資料之
Thumbnail
AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
Thumbnail
AJAX(Asynchronous JavaScript And XML)為JavaScript和XML的非同步技術,可以讓瀏覽器建立快速、更加和容易使用的操作介面。AJAX核心技術是非同步的HTTP請求(Asynchronous HTTP Requests),除了第一次載入網頁外,HTTP請求是在
Thumbnail
這邊分三個部分:新增、檢視和寄送郵件給留言者。 新增 底下是HTML的輸入內容的程式碼: <table border="1"> <tr> <td><font size="2">姓名:</font></td> <td><input type="text" size="30"
Thumbnail
這邊分三個部分:新增、檢視和寄送郵件給留言者。 新增 底下是HTML的輸入內容的程式碼: <table border="1"> <tr> <td><font size="2">姓名:</font></td> <td><input type="text" size="30"
Thumbnail
底下是HTML的上傳檔案程式碼: <form action="upload.php" method="post" enctype="multipart/form-data"> 選擇檔案: <input type="file" name="file"/><hr/> <input typ
Thumbnail
底下是HTML的上傳檔案程式碼: <form action="upload.php" method="post" enctype="multipart/form-data"> 選擇檔案: <input type="file" name="file"/><hr/> <input typ
Thumbnail
$GLOBALS:包含目前執行PHP程式的所有全域變數,其鍵值是全域變數名稱。 $_SERVER:Web伺服器的變數,屬於目前PHP程式執行環境的相關資料。 $_GET:儲存HTTP GET方法傳入PHP程式表單欄位值或URL參數的結合陣列,其鍵值是欄位或參數名稱。 $_POST:儲存HT
Thumbnail
$GLOBALS:包含目前執行PHP程式的所有全域變數,其鍵值是全域變數名稱。 $_SERVER:Web伺服器的變數,屬於目前PHP程式執行環境的相關資料。 $_GET:儲存HTTP GET方法傳入PHP程式表單欄位值或URL參數的結合陣列,其鍵值是欄位或參數名稱。 $_POST:儲存HT
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
Input 輸入元件一直是各大網站必備的元素,這篇會分成文字輸入 Text、按鈕 Button、互動元件 Modal、下拉式選單 Dropdown List、滑桿 Slider、選擇器 Picker 這六種常見介面元件,來記錄我在平台工作時遇到的 UI 元件,作為未來產品開發的資料庫。
Thumbnail
如果你 WHERE 的條件需要常常更動,但每次都要進去 QUERY 所在的儲存格編輯語法,實在是有點太麻煩了?但其實有個小技巧,可以讓 QUERY 更新得更輕鬆。來看看吧!
Thumbnail
如果你 WHERE 的條件需要常常更動,但每次都要進去 QUERY 所在的儲存格編輯語法,實在是有點太麻煩了?但其實有個小技巧,可以讓 QUERY 更新得更輕鬆。來看看吧!
Thumbnail
S1.建立資料庫 user S2.建立 index.htm a.載入 vue.js、jquery、bootstrap b.版面建立 S3.vue.js程式 新增、查看列表、互動視窗、修改、刪除 index.htm VueControl.js 原碼:https://reurl.cc/e3k8yL
Thumbnail
S1.建立資料庫 user S2.建立 index.htm a.載入 vue.js、jquery、bootstrap b.版面建立 S3.vue.js程式 新增、查看列表、互動視窗、修改、刪除 index.htm VueControl.js 原碼:https://reurl.cc/e3k8yL
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News