版权声明:转载请指明出处 https://blog.csdn.net/weixin_42321963/article/details/82681968
第一步:实现最简单的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();
}
}
}
}
主要代码如上,还需要做一些配置,需要自己慢慢配置,结束。
**************************************************************************************
成功。