下面是利用ajax完成的文本框自动补全，数据转换格式用的是json，代码中的javacommon.ijdbc是自己写的jdbc的封装，大可换成别的。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var compUsername = function() {
//1.创建XMLHttpRequest对象
var xmlRequest = new XMLHttpRequest();
//alert(xmlRequest);
//2.发送请求
var username = document.getElementById("username").value;
if (username == '') {
return;
}
xmlRequest.open("POST", "/myWeb/CompleteUsername", true); //第三个参数必须
xmlRequest.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xmlRequest.send("username=" + username + "&r=" + new Date());
xmlRequest.onreadystatechange = function() {
if (xmlRequest.readyState == 4) {//如果响应状态为4,说明响应成功
var resp = xmlRequest.responseText;
var rst = eval("(" + resp + ")");//转换json字符串为js对象
var nameArray = rst.list;
var i;
var nameList = document.getElementById("nameList");
nameList.innerHTML = '';
for (i = 0; i < nameArray.length; i++) {
//alert(nameArray[i]);
var newP = document.createElement("p");
newP.innerHTML = nameArray[i];
newP.onclick = function() { //给每一个添加点击事件
//alert();
document.getElementById("username").value = this.innerHTML;
nameList.style.display = 'none';
};
nameList.appendChild(newP);
}
nameList.style.display = 'block';
//解析
//alert(resp);
}
};
};
function selectName(html) {
document.getElementById("username").value = html;
var nameList = document.getElementById("nameList");
nameList.style.display = 'none';
}
</script>
</head>
<body>
用户名：
<input type="text" id="username" name="username"
onkeyup="compUsername()">
<div id="nameList"
style="width: 200px; height: auto; position: relative; left: 65px; top: -18px; display: none;">
<p onclick="selectName(this.innerHTML)">Abel1</p>
</div>
</body>
</html>
查询数据用的是一个servlet
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javacommon.ijdbc.IJdbcOperation;
import javacommon.ijdbc.impl.JdbcUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/CompleteUsername")
public class CompleteUsername extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
//查询类似的username
String sql = "select last_name from employees where last_name like '"+username+"%'";
IJdbcOperation operation = JdbcUtils.getInstance();
try {
ResultSet rs = operation.queryForResultSet(sql);
StringBuilder sb = new StringBuilder("{\"list\":[");
while (rs.next()) {
String _un = rs.getString(1);
sb.append("\"").append(_un).append("\",");
}
int index = sb.length()-1;
if (sb.charAt(index)==',') {
sb.deleteCharAt(index); //删除多余的逗号
}
sb.append("]}");
PrintWriter writer = response.getWriter();
writer.write(sb.toString());
writer.flush();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
相关推荐
在这个场景下，"ajax文本框自动补全功能"是一个常见且实用的设计，它极大地提升了用户体验，尤其是在输入搜索关键词或者填写表单时。这种功能类似于百度搜索引擎的自动索引功能，用户在输入框中输入文字时，系统会...
jQuery Autocomplete是一款强大的JavaScript插件，它为网页中的输入框提供了自动补全功能，极大地提升了用户的交互体验。...通过不断实践和定制，你可以创造出满足特定需求的文本框自动补全解决方案。
标题中的“jQuery 实现文本框自动补全”指的是在网页中使用jQuery库来创建一个功能，当用户在输入框中输入文字时，系统会根据已有的数据源提供匹配的建议，帮助用户快速完成输入。这种功能常用于搜索引擎、表单填充...
在本文中，我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见，它能够提高用户输入的效率和用户体验。 首先，让...
在网页开发中，实现文本框自动补全通常涉及到以下几个关键知识点： 1. **JavaScript**：作为前端的主要编程语言，JavaScript负责处理用户的输入事件，监听文本框的`input`或`keyup`事件，当用户开始输入时触发补全...
总之，JavaScript文本框下拉自动补全提示是通过监听输入、匹配数据、展示下拉列表和响应用户选择等步骤实现的。开发者可以通过选择合适的库和自定义配置，为用户提供便捷的输入体验。在实际应用中，还需考虑性能、...
在本文中，我们将深入探讨如何使用jQuery实现一个文本框自动补全的功能，这对于提升用户输入体验，尤其是在处理大量可选项时非常有用。我们将基于提供的文件`autoComplate.html`、`jquery-1.5.js`、`uuAutoComplete....
Jquery实现仿搜索引擎文本框自动补全插件功能很实用，使用也很简单，引入了插件之后写几行代码就可以实现，可以灵活设置 //width:下拉框的宽度，默认使用输入框宽度、用来ajax后台获取数据，返回的数据格式为data...
ASP.NET AJAX 文本框内容自动补全JS代码 自动补全 自动提示 根据关键词自动下拉菜单
本实例将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，即"autocomplete"。Ajax（Asynchronous JavaScript and XML）技术允许在不刷新整个页面的情况下与服务器进行异步数据交换，使得用户体验更加...
搜索引擎文本框自动补全是一种常见的用户体验优化技术，广泛应用于各种在线搜索平台，如谷歌、百度等。这种功能在用户输入查询关键词时，会预测并显示可能的搜索建议，帮助用户快速找到想要的信息，提高搜索效率。 ...
jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具，它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建，因此，使用它之前需要确保项目中已经引入了...
`jQuery UI`是jQuery的一个扩展库，提供了一系列的用户界面组件，其中包括`Autocomplete`功能，这个功能用于实现文本框的自动补全效果。在本篇中，我们将深入探讨如何使用jQuery和jQuery UI的Autocomplete功能，以及...
本篇文章将详细探讨“jQuery文本框联想补全自动完成插件”的工作原理、实现方式以及如何进行二次修改，旨在为有需求的开发者提供深入的理解和实践指导。 一、jQuery自动完成插件基础 jQuery是一款广泛使用的...
在本文中，我们将深入探讨如何使用jQuery来实现一个仿照百度和谷歌搜索引擎的文本框自动补全插件。这个插件的主要目标是提供用户友好的输入体验，通过预测和建议可能的搜索词来提高搜索效率。 ### jQuery简介 ...
在本文中，我们将深入探讨如何使用Jquery实现一个仿搜索引擎文本框自动补全功能，这是一个在Web开发中常见的用户体验优化工具。此项目实践基于人工智能的背景，利用JavaScript库Jquery来提升用户在搜索框中的输入...
在本项目中，Ajax被用来实现自动补全和搜索功能，提升用户输入体验，减少不必要的页面跳转，提高网页响应速度。 首先，自动补全功能是基于用户输入的字符，在后台数据库或数据源中实时查找匹配项，并在用户输入过程...
总的来说，"仿搜索引擎文本框自动补全插件"的实现涉及到前端的JavaScript/jQuery编程，后端的数据处理，以及CSS样式设计。理解这些知识点并熟练运用，可以提升网站的用户体验，增加用户满意度。通过查看提供的`index...
本资源"jQuery实现的文本框自动联想补全特效源码.zip"显然提供了一种利用jQuery来创建文本框自动补全功能的实现方式，这种功能在许多网页应用中都十分常见，例如搜索引擎、输入框建议和在线表单等。 自动补全功能...