[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
※ 基本操作: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
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News