ajax邮箱后缀自动补全

来源:互联网 发布:网络电视tv版 编辑:程序博客网 时间:2024/05/01 10:41

效果图

这里写图片描述

选中效果

这里写图片描述

数据我这里用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>

源码下载 - - - > ajax邮箱自动追加后缀

0 0