ajax自动提示

第一步：实现最简单的ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jquery-ui-1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            var ds = [
                '张三',
                '张三丰',
                '张三勇',
                '李三一'
            ]
            $("#name").autocomplete({
                source: ds,
                minLength: 1
            })

        })
    </script>
</head>
<body>
查询：<input type="text" id="name">

</body>
</html>

结果：

结果很劣质，改正

第二步：改正的自动填充

网址：http://jqueryui.com/autocomplete/，

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "c",
                "c++",
                "Clojure",
                "cobol",
                "coldfusion",
                "erlang",
                "fortran",
                "groovy",
                "haskell",
                "java",
                "javascript",
                "lisp",
                "perl",
                "php",
                "python",
                "ruby",
                "scale",
                "scheme"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });

    </script>

</head>
<body>
<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>
</body>
</html>

结果如下：

第三步：

使用ajax技术，实现添加学生时，智能提示学生姓名，要求使用mysql数据库实现

		使用ajax技术，实现添加学生时，智能提示学生姓名，要求使用mysql数据库实现
**************************************************************************************
第一步：
在项目目录下：新建search.html：代码如下：


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="js/jquery-ui-1.12.1/jquery-ui.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jquery-ui-1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            var availableTags = [
                '张三',
                '张三丰',
                '张思强',
                '李三永',
                '嘎子'
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });

    </script>

</head>
<body>
<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>
</body>
</html>

第二步：
在src目录下创建servlet包，在servlet包下继续创建Show

package com.servlet;

import com.alibaba.fastjson.JSONObject;
import com.xing.MyDb;
import com.xing.Mydate;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

@WebServlet("/game/show.do")
public class Show extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        PrintWriter out = resp.getWriter();
        MyDb db = new MyDb("dt_game", "root", "");
        if (req.getParameter("term") != null) {
            System.out.println("hello");
            String sql = "select account from accs where account like ?;";
            Connection conn = db.getConn();
            PreparedStatement pst = null;
            try {
                pst = conn.prepareStatement(sql);
                pst.setString(1, "%" + req.getParameter("term") + "%");
                //System.out.println("%"+req.getParameter("term")+"%");
                List<String> str = new ArrayList<>();
                ResultSet res = pst.executeQuery();
                while (res.next()) {
                    str.add(res.getString("account"));
                }
                // System.out.println(JSONObject.toJSON(str));
                out.println(JSONObject.toJSON(str));
            } catch (Exception e) {
                e.printStackTrace();
            }

        }
    }
}

主要代码如上，还需要做一些配置，需要自己慢慢配置，结束。

**************************************************************************************

成功。

猜你喜欢