版权声明：本文为博主吕小布原创文章，未经允许不得转载。 https://blog.csdn.net/qq_36769100/article/details/79500071
摘要：
jquery有一个自动不全的插件，现在记录一下如何实现jquery的自动补全功能。
话不多说，直接开始：
第一步：引入支持jquery自动补全的相关插件
早前，jquery autocompete.js是一个独立的插件，但是现在他被合并在了jquery-ui中，并且独立的版本之后都不会再更新。
那么我们就需要下载并引入jquery-ui.js
给大家一个官网的传送门：jquery-ui官网下载
如果不会从官网上下载的话，我有下载并整理好的资源，而且里面附带了相关说明，至于分数，csdn不让给0分，这里是传送门：jquery-ui相关资源及说明
完成下载后，将相关js引入工程即可，再强调一下，jquery.js应该声明再jquery-ui.js的前面
第二步：jsp页面
jsp页面中生成一个input框，用于输入信息，
input框下放入一个隐藏div，用于显示的补全信息，如
<input type="text" id="input_localName" class="input_localName" placeholder="输入网元名称">
<div class="show_div"></div>第三步：css样式
相关样式根据实际情况来写
第四步：相关js代码：
<script type="text/javascript">
$(document).ready(function(){
$("#input_localName").autocomplete({
source: function( request, response ) {
$.ajax({
url : "vc4/getAutocompleteData.action",
type : "post",
data : {localName : $("#input_localName").val()},
dataType : "json",
success: function( jsonData ) {
var data = eval(jsonData);
var context = "";
response( $.map( data, function( item ) {
/*获取后台匹配到的返回值*/
var name = item.localName+"";
var neId = item.managedElement+"";
/*拼接补全div内容 */
context = context + "<div class='append_div'><span class='append_span' onclick=select('"+name+"')>"+name+"</span><div>";
}));
if(context != ""){
$(".show_div").html(""); /* 清空上一次补全div中的内容 */
$(".show_div").append(context);
$(".show_div").show();
}else{
$(".show_div").hide();
}
}
});
},
});
/*鼠标点击其他地方，补全的div消失 */
$("body").mouseup(function(){
$(".show_div").hide();
});
})
/*该方法是再拼接div内容时加上的，即鼠标选中的时候，input框输入选中值 */
function select(localName){
$("#input_localName").val(localName);
$(".show_div").hide();
}
</script>第五步：后台相关代码
后台的相关代码比较简单，就是取出前台传递过来的数据，然后进行数据处理，最后将处理好的数据放入List<Map>并转成json格式来返回到前台
5.1.在后台你要能进到url指定的action的方法中。
5.2.在后台的方法中，进行过数据处理后，是生成了一个List<Map<String,String>> list，
list中的每个map有两个key值，
一个是localName，一个是managedElement，
(这两个key值是自定义的，只要前台获取时保持一致即可)。
5.3.将list通过jackson转为json串返回了前台。
大概功能如图:
虽然,我也是个萌新。
你好，我叫吕小布