[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
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
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