`
huguangsheng
  • 浏览: 15053 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ajax实现文本框自动补全

阅读更多

   下面是利用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();
        }
	}
}

 

1
0
分享到:
评论
1 楼 panghaoyu 2017-03-17  
实现一个智能提示功能需要ajax、数据库、jsp/php、算法等很多知识,
如果数据量大,还需要特殊优化
一个小功能,花费太大精力很不划算
92find.com上的一个js插件实现了搜索框自动补全托管服务,
只要一行javascript代码就可以实现百度、淘宝搜索框提示的全部功能
比如:汉字拼音匹配、拼音前缀匹配、模糊搜索、智能容错,还可以自定义提示词汇及其排序权重
花五分钟我的网站就可以部署同百度、淘宝一样强大好用的输入提示功能
同时兼容IE、Firefox、Safari、Chrome、Opera各种浏览器
兼容ios、Android、Windows

相关推荐

    ajax文本框自动补全功能

    在这个场景下,"ajax文本框自动补全功能"是一个常见且实用的设计,它极大地提升了用户体验,尤其是在输入搜索关键词或者填写表单时。这种功能类似于百度搜索引擎的自动索引功能,用户在输入框中输入文字时,系统会...

    jQuery实现文本框自动补全

    jQuery Autocomplete是一款强大的JavaScript插件,它为网页中的输入框提供了自动补全功能,极大地提升了用户的交互体验。...通过不断实践和定制,你可以创造出满足特定需求的文本框自动补全解决方案。

    jquery 实现文本框自动补全

    标题中的“jQuery 实现文本框自动补全”指的是在网页中使用jQuery库来创建一个功能,当用户在输入框中输入文字时,系统会根据已有的数据源提供匹配的建议,帮助用户快速完成输入。这种功能常用于搜索引擎、表单填充...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    文本框自动补全,自动提示原来填写过的内容

    在网页开发中,实现文本框自动补全通常涉及到以下几个关键知识点: 1. **JavaScript**:作为前端的主要编程语言,JavaScript负责处理用户的输入事件,监听文本框的`input`或`keyup`事件,当用户开始输入时触发补全...

    JavaScript 文本框下拉自动补全提示

    总之,JavaScript文本框下拉自动补全提示是通过监听输入、匹配数据、展示下拉列表和响应用户选择等步骤实现的。开发者可以通过选择合适的库和自定义配置,为用户提供便捷的输入体验。在实际应用中,还需考虑性能、...

    jquery文本框自动补全实例

    在本文中,我们将深入探讨如何使用jQuery实现一个文本框自动补全的功能,这对于提升用户输入体验,尤其是在处理大量可选项时非常有用。我们将基于提供的文件`autoComplate.html`、`jquery-1.5.js`、`uuAutoComplete....

    Jquery实现仿搜索引擎文本框自动补全插件

    Jquery实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置 //width:下拉框的宽度,默认使用输入框宽度、用来ajax后台获取数据,返回的数据格式为data...

    ASP.NET AJAX 文本框内容自动补全JS代码

    ASP.NET AJAX 文本框内容自动补全JS代码 自动补全 自动提示 根据关键词自动下拉菜单

    jquery文本框自动补全完整实例 ajax autocomplete

    本实例将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,即"autocomplete"。Ajax(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与服务器进行异步数据交换,使得用户体验更加...

    搜索引擎文本框自动补全

    搜索引擎文本框自动补全是一种常见的用户体验优化技术,广泛应用于各种在线搜索平台,如谷歌、百度等。这种功能在用户输入查询关键词时,会预测并显示可能的搜索建议,帮助用户快速找到想要的信息,提高搜索效率。 ...

    jQuery文本框联想补全自动完成插件

    jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具,它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建,因此,使用它之前需要确保项目中已经引入了...

    jquery文本框自动补全ajax autocomplete

    `jQuery UI`是jQuery的一个扩展库,提供了一系列的用户界面组件,其中包括`Autocomplete`功能,这个功能用于实现文本框的自动补全效果。在本篇中,我们将深入探讨如何使用jQuery和jQuery UI的Autocomplete功能,以及...

    jQuery文本框联想补全自动完成插件.zip

    本篇文章将详细探讨“jQuery文本框联想补全自动完成插件”的工作原理、实现方式以及如何进行二次修改,旨在为有需求的开发者提供深入的理解和实践指导。 一、jQuery自动完成插件基础 jQuery是一款广泛使用的...

    Jquery实现仿搜索引擎(百度、谷歌)文本框自动补全插件

    在本文中,我们将深入探讨如何使用jQuery来实现一个仿照百度和谷歌搜索引擎的文本框自动补全插件。这个插件的主要目标是提供用户友好的输入体验,通过预测和建议可能的搜索词来提高搜索效率。 ### jQuery简介 ...

    人工智能-项目实践-搜索引擎-实现仿搜索引擎文本框自动补全Jquery插件

    在本文中,我们将深入探讨如何使用Jquery实现一个仿搜索引擎文本框自动补全功能,这是一个在Web开发中常见的用户体验优化工具。此项目实践基于人工智能的背景,利用JavaScript库Jquery来提升用户在搜索框中的输入...

    Ajax实现自动补全和搜索功能(jsp)

    在本项目中,Ajax被用来实现自动补全和搜索功能,提升用户输入体验,减少不必要的页面跳转,提高网页响应速度。 首先,自动补全功能是基于用户输入的字符,在后台数据库或数据源中实时查找匹配项,并在用户输入过程...

    仿搜索引擎文本框自动补全插件

    总的来说,"仿搜索引擎文本框自动补全插件"的实现涉及到前端的JavaScript/jQuery编程,后端的数据处理,以及CSS样式设计。理解这些知识点并熟练运用,可以提升网站的用户体验,增加用户满意度。通过查看提供的`index...

    jQuery实现的文本框自动联想补全特效源码.zip

    本资源"jQuery实现的文本框自动联想补全特效源码.zip"显然提供了一种利用jQuery来创建文本框自动补全功能的实现方式,这种功能在许多网页应用中都十分常见,例如搜索引擎、输入框建议和在线表单等。 自动补全功能...

Global site tag (gtag.js) - Google Analytics