jQuery Autocomplete 是一種方便實用的 jQuery 插件,它可以為文本框和 textarea 添加自動完成功能,使得輸入更加智能和高效。該插件在官網(https://jqueryui.com/autocomplete/)上有詳細的介紹和使用說明,以下是一些代碼示例。
首先,我們需要在頁面中引入 jQuery 和 jQuery UI 的庫文件:
<!-- 引入 jQuery 庫文件 --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- 引入 jQuery UI 庫文件 --> <link rel="stylesheet" > <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
然后,在 HTML 中添加文本框或 textarea 元素,并為其綁定自動完成事件:
<!-- 添加文本框元素 --> <input type="text" id="autocomplete"> <!-- 使用 jQuery Autocomplete 綁定自動完成功能 --> <script> $( "#autocomplete" ).autocomplete({ source: [ "蘋果", "香蕉", "橙子", "柚子", "草莓", "藍莓" ] }); </script>
上面的代碼片段中,我們為一個文本框元素綁定了一個自動完成事件。其中,source 選項指定了自動完成功能的數據源,這里我們使用了一個簡單的數組作為示例。您可以通過 Ajax 或其他方式動態獲取數據,并將其傳遞給 source 選項。
除了數據源,jQuery Autocomplete 還提供了很多其他的選項,通常我們只需要根據需求進行簡單的配置即可實現所需的效果。具體的 API 文檔可以在官網上找到。
上一篇圖片凹進去css
下一篇圖片切割為梯形css