版权声明:本文为博主吕小布原创文章,未经允许不得转载。 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串返回了前台。
大概功能如图:
虽然,我也是个萌新。
你好,我叫吕小布