输入框自动匹配实践(java web)

最新推荐文章于 2024-01-11 15:34:54 发布

xinke0802

最新推荐文章于 2024-01-11 15:34:54 发布

阅读量3.3k

点赞数 1

分类专栏： java web 小功能实现文章标签： java web javascript html servlet 输入框自动匹配

本文链接：https://blog.csdn.net/xinke0802/article/details/22825441

版权

本文介绍了一个在MyEclipse8.5中实现的Java Web项目，通过监听输入框，获取英文字符，后台匹配并返回XML，前端解析生成下拉列表，实现了输入框自动匹配功能。主要涉及文件包括word.jsp，适用于根据需求自定义英文或汉字的匹配场景。

摘要由CSDN通过智能技术生成

做项目过程中，需要实现输入英文字母自动匹配对应字母开头的中文，经过长时间的资料搜集和实践，终于完成！于是乎，写了个小的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）进行