1、index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link type="text/css" href="css/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" >
$(function(){
//自动补全
$("#username").autocomplete({
minLength:1,
source: function(request,response){
$.ajax({
url: 'Test', // 后台请求路径
//请求参数
data:{
username:request.term//请求参数.换成$("#username").val()一样
},
//data为返回数据(json)
success: function( data ) {//回调函数
var d = JSON.parse(data);//将 JSON 字符串转换为对象
response(d);//响应
}
});
}
}); });
</script> </head> <body>
用户名:<input type="text" name="username" id="username" />
</body>
</html>

2、json的必须包,jquery-ui-1.10.4.custom.css,jquery-ui-1.10.4.custom.js

3、Test.java

package com.cn.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; public class Test extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = new String(request.getParameter("username").getBytes("iso8859-1"),"utf-8");
response.setContentType("text/html;charset=utf-8"); //看成数据库的数据
List list = new ArrayList();
list.add("jack");
list.add("tom");
list.add("toy");
list.add("json");
list.add("lily");
list.add("lucy"); //看成模糊匹配数据库返回的集合
List li = new ArrayList(); for(int i=0;i<list.size();i++){
if(list.get(i).toString().indexOf(username)!=-1){
li.add(list.get(i));
}
} //将list转json
JSONArray json = JSONArray.fromObject(li); PrintWriter out = response.getWriter(); out.print(json);
out.flush();
out.close();
} public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { this.doGet(request, response);
} }

Ajax和Json实现自动补全的更多相关文章

  1. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  2. AJAX实现类似百度的搜索提示,自动补全和键盘、鼠标操作

    <script type="text/javascript"> $(document).ready(function(){ var highlightIndex = - ...

  3. Autocomplete 自动补全(Webform实战篇)

    开篇语 因为项目中需要用到一个自动补全的功能,功能描述: 需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式) 需求二:选中一个值得时候,分别赋 ...

  4. autocomplete实现联想输入,自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  5. bigautocomplete实现联想输入,自动补全

    bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax ...

  6. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

  7. jquery 自动补全控件(支持IE6)待整理

    自动补全控件(兼容IE6):http://bassistance.de/ download地址:http://jquery.bassistance.de/autocomplete/jquery.aut ...

  8. bootstrap3-typeahead 自动补全

    很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://gith ...

  9. 练习笔记:net,JqueryUI实现自动补全功能

    1.首先建立个空的Web项目 2.将下载好的JqueryUI文件保存到JS文件加下 3.引入JS文件 <link href="JS/css/ui-lightness/jquery-ui ...

随机推荐

  1. 【BZOJ5213】[ZJOI2018]迷宫(神仙题)

    [BZOJ5213][ZJOI2018]迷宫(神仙题) 题面 BZOJ 洛谷 题解 首先可以很容易的得到一个\(K\)个点的答案. 构建\(K\)个点分别表示\(mod\ K\)的余数.那么点\(i\ ...

  2. iis默认文档

    环境 W10 IIS10 输入网址后,显示一个默认首页,在IIS中,一般指定一个根目录下的文件例如index.html 如果要指定子目录下的文件, 例如让 /home/index.html 这个文件成 ...

  3. Visible Trees HDU - 2841(容斥)

    对于已经满足条件的(x1,y1),不满足条件的点就是(n*x1,n*y1),所以要求的就是满足点(x,y)的x,y互质,也就是gcd(x,y) == 1,然后就可以用之前多校的方法来做了 另f[i] ...

  4. Python By 360、小米

    小米 乱谈Python并发 说实话,我一直觉得PHP真的是最好的语言,不仅养活了一大批PHP程序员,同时还为安全人员提供了大量的就业机会.然而,令人唏嘘的是,安全界很多人其实是吃着Python的饭,操 ...

  5. bzoj4842 Delight for a Cat

    题意:n天内你每天可以s或者e,分别有一定的收益. 每连续k天中s的天数要大于ds,e的天数要大于de,求最大收益. 解:费用流解线性规划. 先假设全部选e,然后一天s的收益为si - ei ai表示 ...

  6. Vue中data返回对象和返回值的区别

    速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...

  7. python基础之IO编程

    读文件 with open('/path/to/file', 'r') as f: print(f.read()) 调用read()会一次性读取文件的全部内容,read()函数里面可以传入每次最多读取 ...

  8. 原生JS正则实现trim()

    Jquery中封装有trim() 原生需要自己实现,我们可以用原型的方式自己封装trim()方法,实现去掉前后空格.前空格.后空格...所以不必抱怨,简单又灵活,这才是强大的JS的特色 String. ...

  9. c#线程1

    开启一个线程的方式: 方式一:Thread t1 = new Thread(Method_1); t1.Start();方式二:委托 Action ac = Method_1; ac.BeginInv ...

  10. HTML学习笔记Day9

    一.宽高自适应 网页布局中经常要定义元素的宽和高:但很多时候我们希望元素的大小能够根据窗口或父元素自动调整,这就是自适应,元素自适应在网页布局中非常重要,tanenggou它能够使网页显示更灵活,可以 ...