JQuery AutoComplete插件實現自動補全

官網
jquery提供的這個插件確實強大，十幾行代碼就可以實現自動補全功能，而且還可以選擇多種不同的數據源，可以說是非常方便。
此文還查閱了一些關于改插件在JQuery模態框中不顯示下拉菜單的原因的相關資料和解決辦法

---

版本聲明:
jquery：jQuery v3.5.1
jQuery UI - v1.12.1 - 2021-09-12
jQuery.ui.min.css：v1.10.4

---

HTML

需要先引入上述文件
此處需要注意的是我是在JQuery模態框中使用自動補全插件的

<div class="modal fade" id="addPlanModal" tabindex="-1" aria-labelledby="addPlanModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><strong class="modal-title" id="addPlanModalLabel">標題</strong><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><form class="form"><div class="form-floating mb-2 form"><input type="text" class="form-control" id="visit" placeholder="走訪客戶"><label for="visit">請選擇</label></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button><button type="button" class="btn btn-primary add-sch-btn">保存</button></div></div></div> </div>

---

JS

$(function(){$( "#visit" ).autocomplete({source: function(request, response) {$.ajax({url: "/xxx/xxx",data: {'key': request.term, // 輸入框中的內容},dataType: "json",async: false,success: function( res ) {// response(res.data);response( $.map( res.data, function( item ) {// item就是從數據庫中返回的單個對象return {label: item, // 下拉菜單中的內容value: item, // 選中的實際內容}}));}});},appendTo: $('.form'), // 加此項參數可解決modal中不顯示下拉菜單問題minLength: 2,select: function(event, ui) {// 選中之后要做的事 // ui 就是你選中的對象 你可以把它打印出來看}}); });

---

關于AutoComplete在模態框中不顯示下拉菜單的問題

(1) 在autocomplete函數中添加配置項 appendTo: $(‘.form’), form是form表單類名稱。
(2) 在autocomplete中調用jQueryAjax時，數據類型配置項dataType的值設置為json。如果使用官網的jsonp可能導致下拉菜單無法顯示。

總結

以上是生活随笔為你收集整理的JQuery AutoComplete插件实现自动补全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。