JQuery AutoComplete插件實(shí)現(xiàn)自動(dòng)補(bǔ)全

官網(wǎng)
jquery提供的這個(gè)插件確實(shí)強(qiáng)大，十幾行代碼就可以實(shí)現(xiàn)自動(dòng)補(bǔ)全功能，而且還可以選擇多種不同的數(shù)據(jù)源，可以說是非常方便。
此文還查閱了一些關(guān)于改插件在JQuery模態(tài)框中不顯示下拉菜單的原因的相關(guān)資料和解決辦法

---

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

---

HTML

需要先引入上述文件
此處需要注意的是我是在JQuery模態(tài)框中使用自動(dòng)補(bǔ)全插件的

<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">標(biāo)題</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">請(qǐng)選擇</label></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關(guān)閉</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, // 輸入框中的內(nèi)容},dataType: "json",async: false,success: function( res ) {// response(res.data);response( $.map( res.data, function( item ) {// item就是從數(shù)據(jù)庫中返回的單個(gè)對(duì)象return {label: item, // 下拉菜單中的內(nèi)容value: item, // 選中的實(shí)際內(nèi)容}}));}});},appendTo: $('.form'), // 加此項(xiàng)參數(shù)可解決modal中不顯示下拉菜單問題minLength: 2,select: function(event, ui) {// 選中之后要做的事 // ui 就是你選中的對(duì)象 你可以把它打印出來看}}); });

---

關(guān)于AutoComplete在模態(tài)框中不顯示下拉菜單的問題

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。