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插件实现自动补全相关推荐

html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能
记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...
html 输入框自动缩短一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...
组织管理插件-代码自动补全-语法检查等特性-SpaceVim v1.5.0
简介: SpaceVim 是一个社区驱动的模块化 Vim/Neovim 配置集合,以模块的方式组织管理插件以及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全, 语法检查. ...
linux自动补全命令插件,vim自动补全插件snipMate
linux下安装vim自动补全插件snipMate 环境:ubuntu 下载snipMate 官方网站:http://www.vim.org/scripts/script.php?script_id= ...
Chrome for Android AutoComplete地址栏地址自动补全功能调研和更新
Chrome地址栏地址自动补全功能调研和更新我的博客对应文章地址 Chrome地址栏地址自动补全功能预览补全前提: 1. 使用Gboard输入法 2. Gboard输入法打开了[文字更正]功能里面 ...
Vscode配置Vue插件Vetur自动补全和Eslint校验，正在保存“index.vue”: 从 “‘ESLint‘, ‘Vetur‘“ (configure)中获取代码操作
出现这个问题,主要原因是vetur插件自己升级了,我真服了... 问题描述:一直都是这个提示,然后文件保存不了,然后也无法格式化和代码提示经过一番调教之后,发现通过降级vetur插件搞定了,降级操作 ...
jQuery邮箱自动补全
jQuery各种宽度和高度的获取: width()/height():获取元素的宽/高. innerWidth()/innerHeight():获取元素的宽/高(包括内边距). outerWidth( ...
php文本框自动补全,PHP自动补全表单的两种方法
效果图: 第一种:从数据库中检索之后补全第二种:邮箱等纯前端的补全先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/f ...
jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

JQuery AutoComplete插件实现自动补全

JQuery AutoComplete插件实现自动补全

HTML

JS

关于AutoComplete在模态框中不显示下拉菜单的问题

JQuery AutoComplete插件实现自动补全相关推荐

最新文章

热门文章