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. Hdoj 2036.改革春风吹满地 题解

    Problem Description " 改革春风吹满地, 不会AC没关系; 实在不行回老家, 还有一亩三分地. 谢谢!(乐队奏乐)" 话说部分学生心态极好,每天就知道游戏,这次 ...

  2. yii2记录

    yii2的gridview使用大全 --- 18个问答 Yii2中多表关联查询(hasOne.hasMany.join.joinwith) Yii2.0 RESTful API 之速率限制(包含res ...

  3. CodeForces - 589B（暴力）

    题目链接:http://codeforces.com/problemset/problem/589/B 题目大意:告诉你n 个矩形,知道矩形的长度和宽度(长和宽可以互换),每个矩形的长度可以剪掉一部分 ...

  4. Ubuntu18.04 下 VirtualBox or VMWare 虚拟化问题

    This host supports Intel VT-x, but Intel VT-x is disabled.Intel VT-x might be disabled if it has bee ...

  5. GNOME下让QT应用使用adwaita主题统一外观

    效果展示 使用前 使用后 步骤 Arch Linux下使用AUR安装 sudo yaourt adwaita-qt4 adwaita-qt5 sudo pacman -S qtconfig-qt4 q ...

  6. 【SPOJ10707】COT2 - Count on a tree II

    题目大意:给定一棵 N 个节点的无根树,每个节点有一个颜色.现有 M 个询问,每次询问一条树链上的不同颜色数. 题解:学会了树上莫队. 树上莫队是将节点按照欧拉序进行排序,将树上问题转化成序列上的问题 ...

  7. JavaScript FormData的详细介绍及使用

    本文转自:https://blog.csdn.net/liupeifeng3514/article/details/78988001 FormData的详细介绍及使用请点击此处,那里对FormData ...

  8. 第三篇-Django建立数据库各表之间的联系（下）

    中篇介绍的是添加,下篇主要介绍查询 通过一个Book表的书的信息查询Publish表中出版社的信息 def addbook(request): # Book.objects.create(name=& ...

  9. GWAS研究可利用的数据库（持续更新）

    1.列表包括数据库名称.表型.是否能下载到基因型(genotype).是否能下载到GWAS结果文件(P值.效应值.SNP位点).目前收集到的有如下: 参考到这些数据库的文献:Genome-wide a ...

  10. 斯坦福大学公开课机器学习：machine learning system design | trading off precision and recall（F score公式的提出：学习算法中如何平衡（取舍）查准率和召回率的数值）

    一般来说,召回率和查准率的关系如下:1.如果需要很高的置信度的话,查准率会很高,相应的召回率很低:2.如果需要避免假阴性的话,召回率会很高,查准率会很低.下图右边显示的是召回率和查准率在一个学习算法中 ...