ajax邮箱后缀自动补全

最新推荐文章于 2021-08-06 11:23:46 发布

MQ-HZ

最新推荐文章于 2021-08-06 11:23:46 发布

阅读量567

点赞数

分类专栏： java面向接口文章标签： ajax

本文链接：https://blog.csdn.net/qq_33647275/article/details/52594880

版权

java面向接口专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

这里写图片描述

选中效果

这里写图片描述

数据我这里用html里面是json字符串也可以直接请求servlet返回json

["@qq.com","@163.com","@shouhu.com","@yahu.com","@taobao.com"]

JSP代码

<body>
<div class="auto">

<input type="text" name="search" id="mySearch" >
<div class="showValue">

</div></div>

JS代码

<script type="text/javascript">
$(function(){
    $("#mySearch").keyup(function(){
      var value=$(this).val();//获取当前值

         var _this=$(this);

     $(".showValue").empty().show();//empty清除之前的数据
      $.ajax({
       type:"post",
       url:"data.html",
       success:function(data){

     var arr=eval(data);//将字符串转换为数组
    for(var i=0; i<arr.length; i++){
  $(".showValue").append("<div>"+value+""+arr[i]+"</div>");//append追加搜索到的数据
}
 $(".showValue").find("div").click(function (){
 _this.val($(this).text());
 $(".showValue").hide();//隐藏div
})

}});

});
});

</script>