資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 jQuery UI 中啟用自動完成功能？
Jquery 是一個快速簡單的 Javascript 庫，用於建立客戶端 HTML。它簡化了一些 Javascript 函式，例如 DOM 操作、遍歷、事件處理和 AJAX 呼叫。它還具有跨瀏覽器相容性。
什麼是自動完成？
自動完成是使用者體驗中一個非常重要的功能，顧名思義，它會自動完成表單中的文字，例如姓名、電子郵件、地址或根據網站上下文指定的標籤/建議。
jQuery UI 允許我們使用自動完成小部件啟用自動完成功能。
方法 1：使用 autocomplete() 函式
autocomplete() 函式是一個 jQuery 函式，它與文字輸入或搜尋欄等輸入事件一起使用。當用戶鍵入字母時，此函式會根據傳遞給函式的一些單詞提供建議。
在這裡，我們將使用此 autocomplete 函式來實現自動完成功能，這將增強網頁的 UI/UX。當用戶鍵入一個單詞時，它將根據透過 nameSuggestions 變數傳遞給此函式的單詞自動顯示一些建議。
演算法
步驟 1：在 <head> 內匯入所有所需的 jQuery UI 指令碼。
步驟 2：使用 <form> 標籤和 HTML 中的 <input> 建立一個基本表單。向父元素新增 id。
步驟 3：使用 autocomplete() 方法。將建議/標籤新增到陣列中。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
var nameSuggestions = ['Java','Javascript',"Python",'C','C++','Web Development','Mobile Development'];
$("#input").autocomplete({
source: nameSuggestions
});
});
</script>
</head>
<body>
<form style="text-align: center;">
<h1>Tutorials Point Courses.</h1>
<input id="input" type="text">
</form>
</body>
</html>
在以上輸出中，當用戶鍵入“M”時，自動完成會建議陣列中可用的標籤。
方法 2：使用 enable() 方法
這是一個 jQuery 方法，用於啟用已被停用或新建立的表單功能。建立自動完成小部件後，在輸入元素上呼叫 enable() 函式方法，這將啟用自動完成功能。
此方法中使用的其他引數
minLength：此引數接受一個數字，該數字定義顯示建議所需的字元數，預設為 1。
delay：傳遞的另一個引數是 delay，它接受 Number 並定義顯示建議之前的毫秒數。預設為 300。
在這裡，我們將使用 enable() 方法來啟用 autocomplete() 小部件。
演算法
步驟 1：匯入 jQuery 的所需指令碼，建立一個帶有輸入佔位符的基本表單，並提供合適的 id。
步驟 2：使用 enable() 方法啟用自動完成，此方法不接受任何引數。
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
var nameSuggestions = ['Java','Javascript',"Python",'C','C++','Web Development','Mobile Development'];
$("#input").autocomplete({
source: nameSuggestions,
delay : 500,
minLength: 0
});
$("#input").autocomplete("enable")
});
</script>
</head>
<body>
<form style="text-align: center;">
<h1>Tutorials Point Courses.</h1>
<input id="input" type="text">
</form>
</body>
</html>
在以上輸出中，您可以看到，無需鍵入任何單詞，所有可用的建議都將顯示。這是因為在 autocomplete() 方法中傳遞了 minLength 引數。
以下是一些有用的選項
AutoFocus：接收一個布林值。設定為 true 時，將聚焦建議/標籤陣列的第一個專案。
Disabled：接收一個布林值。設定為 True 時，此選項將停用自動完成功能。
以下是一些有用的方法
close：此方法關閉自動完成選單。disable：此方法停用自動完成選單。
enable：此方法啟用自動完成選單。
destroy：此方法完全刪除自動完成功能並將元素恢復到其初始狀態。
widget：此元素返回一個包含選單元素的 jQuery 元素，此選單會不斷建立和銷燬。
結論
儘管這些是基本的自動完成功能，但您始終可以透過使用 CSS 以及 autocomplete() 方法的選項和方法進行自定義來實現所需的功能。
371 次瀏覽
