做项目过程中,需要实现输入英文字母自动匹配对应字母开头的中文,经过长时间的资料搜集和实践,终于完成!于是乎,写了个小的demo,防止下次使用的时候忘记~~
以附件中的demo为例,这个demo是在MyEclipse8.5中实现的一个java web项目,整个思路是:用一个servlet监听输入框,获取输入英文字符,后台匹配,返回xml格式,前台自动解析,生成对应字符的下拉列表,实现输入框自动匹配功能。
几个重要的文件:(以demo中的文件为例,使用者可根据自己的项目修改和变通)
1、word.jsp:主要用于获取用户的输入
<html>
<head>
<title>word</title>
<script type="text/javascript" src="js/js/jquery.js"></script>
<script type="text/javascript" src="js/auto.js"></script>//实现后台交互js
</head>
<body>
<input id="word" type="text" />
<div id = "auto"> </div>
</body>
</html>
2、auto.js:获取用户输入,提交后台,实现交互
$(document).ready(function(){ //一开始加载方法
var highlightindex = -1;///高亮显示的变量值(0-n) 初始-1即无任何 子div 被选中
var timeout;///服务器交互延迟
var wordInput = $("#word"); //输入框节点 <strong>(可根据项目需求修改~~~~~~~~~~~~~)</strong>
var wordInputOffset = wordInput.offset(); //获取输入框的属性函数
var autoNode = $("#auto");//初始的auto div节点<span style=" font-family: Arial, Helvetica, sans-serif;"><strong>(可根据项目需求修改~~~~~~~~~~~~~)</strong></span>
autoNode.hide();//隐藏
autoNode.css("position","absolute"); //相对于其最接近的一个最有定位设置的父对象(wordInput)进行