JQuery AutoComplete插件实现自动补全

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可能导致下拉菜单无法显示。