使用JQuery自动完成插件Auto Complete详解

在本篇攻略中，我们将会详细讲解如何使用JQuery自动完成插件Auto Complete，来让用户更加方便地输入内容。

安装JQuery

首先，我们需要在你的网站中引入JQuery库，可以通过以下方式在head标签中引入：

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

安装Auto Complete插件

下载Auto Complete插件，将其放置在你的项目中，并在head标签中引入：

<script src="path/to/jquery.autocomplete.min.js"></script>

使用Auto Complete插件

Auto Complete插件的使用十分便捷，只需要在输入框上绑定一个autocomplete事件，然后将返回的结果填充到一个下拉列表中，就可以实现自动完成的效果。

以下是一个简单的示例，当用户在输入框中输入“j”时，将自动弹出下拉框，列出包含“j”的所有城市名称：

<input type="text" id="city" placeholder="输入城市名称"/>
<div id="city-list"></div>
<script type="text/javascript">
$(document).ready(function () {
    $("#city").autocomplete({
        source: ["北京市", "上海市", "广州市", "深圳市", "杭州市", "长沙市", "南京市", "成都市", "武汉市", "厦门市", "西安市", "重庆市", "天津市", "青岛市", "大连市", "沈阳市", "苏州市", "济南市", "哈尔滨市", "长春市", "福州市", "南昌市", "南宁市", "无锡市", "佛山市", "东莞市", "中山市", "郑州市", "合肥市", "太原市", "石家庄市", "昆明市", "兰州市", "贵阳市", "海口市", "南通市", "嘉兴市", "湖州市", "芜湖市", "绍兴市", "金华市", "+20 more..."],
        autoFocus:true,
        response:function (event,ui) {
            //将返回的结果填充到下拉列表中。
            var list = $("#city-list").empty();
            $.each(ui.content, function (index, item) {
                $("<div>").text(item.label).appendTo(list);
            });
        }
    });
});
</script>

在上面的代码中，我们通过调用autocomplete方法，来将输入框上的autocomplete事件与一个城市名称数组绑定在一起。其中，source参数指定要自动完成的数组，autoFocus参数指定为true时，将会有一个默认选择项，response方法用来在返回结果时将结果填充到下拉列表中。最后，我们将下拉列表放置在一个id为“city-list”的div中。

下面是另一个示例，当用户在输入框中输入“a”时，将自动弹出下拉框，列出包含“a”的所有电影名称，并且在用户选择一个电影时，会弹出该电影的信息：

<input type="text" id="movie" placeholder="输入电影名称"/>
<div id="movie-info"></div>
<script type="text/javascript">
$(document).ready(function () {
    $("#movie").autocomplete({
        source: function (request, response) {
            //异步获取所有包含输入值的电影名称。
            var movies = ["阿凡达", "阿甘正传", "爱情公寓", "北京爱情故事", "复仇者联盟", "看不见的客人", "蝙蝠侠：黑暗骑士", "绿皮书", "波西米亚狂想曲", "白蛇：缘起", "美食大战老鼠", "复仇者联盟4：终局之战"],
                matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response($.grep(movies, function (movie) {
                return matcher.test(movie);
            }));
        },
        autoFocus:true,
        select:function(event,ui){
            //显示该电影的信息。
            var info = "《" + ui.item.value + "》是一部非常好看的电影。"; //假设该电影名称的详细信息在数据库中。
            $("#movie-info").html(info).show();
        }
    });
});
</script>

在这个示例中，我们使用了与上面不同的source方法，用来异步获取所有包含输入值的电影名称。当用户选择一个电影名称时，在select方法中将该电影名称的详细信息展示在一个id为“movie-info”的div中。

至此，我们已经详细讲解了如何使用JQuery自动完成插件Auto Complete，让用户更加方便地输入内容。