智能提示框---bai
input.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<style>
ul
{
list-style: none
} </style> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script>
var xmlHttpRequest = null;
//ajax的服务器验证
function send_ajax_request()
{
var word = document.getElementById("word").value; //获得控件的输入值
if(word.length==0) //如果搜索词为空，则不发送请求
return; //a js中创建ajax请求对象
xmlHttpRequest = new XMLHttpRequest();
//b 通过open方法连接服务器 var url = "HotWordServlet";
xmlHttpRequest.open("post",url,true);
xmlHttpRequest.
setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); //c 通过onreadystatechange注册“回调函数”
xmlHttpRequest.onreadystatechange = doreceive; //d 通过send发送请求数据 xmlHttpRequest.send("word="+word)//请求报文的body，即post的参数。
} //ajax响应后自动回调的方法！
function doreceive()
{
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
//将div变为可见
document.getElementById("tip").style.display = ""; //将div的内部html替换成服务器响应的内容
document.getElementById("tip").innerHTML = xmlHttpRequest.responseText;
}
} //将该id对应li进行高亮，其他的li变为正常
function highlight(id)
{
//获取所有的li标签
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
lis[i].style.backgroundColor = "white";
}
var li = document.getElementById(id);
li.style.backgroundColor = "yellow";
}
//点击id对应的提示行
function doclick(id)
{
//1 将该li的文字放到输入框中
var li = document.getElementById(id);
document.getElementById("word").value = li.innerText;
//2 隐藏提示框
document.getElementById("tip").style.display = "none";
}
</script>
<body>
<input id="word" name="word" style="position: absolute; left: 200px;top: 200px;width: 200px;height: 20px;" onkeyup="send_ajax_request()">
<input type="button" style="position: absolute; left: 400px;top: 200px;width: 50px;height: 20px;"
value="搜索"/>
<div id="tip" style="position: absolute; left: 200px;top: 220px;width: 200px;height: 100px;background-color:white;border-color: gray;border-style: solid;display: none"> </div>
</body>
</html>
HotWordServlet: import java.io.IOException;
import java.io.PrintWriter;
import java.util.Comparator;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
import java.util.TreeSet; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class HotWordServlet extends HttpServlet { //模拟“热词表”，key为关键词，value为搜索次数
private Map<String,Integer> hotwords = new HashMap<String,Integer>(); /**
* Constructor of the object.
*/
public HotWordServlet() {
initHotWords();
}
//初始化热词
private void initHotWords()
{
hotwords.put("马尔代夫", 10000);
hotwords.put("马云", 9000);
hotwords.put("马云的老婆", 8000);
hotwords.put("马蓉", 12000);
hotwords.put("王宝强", 8000);
hotwords.put("王者荣耀", 7500);
hotwords.put("王欧", 7000);
hotwords.put("王思聪", 6000);
hotwords.put("王子文", 5000);
} //内部类，自定义比较器，实现对热词的字符串按照搜索次数进行倒序
class MyHotWordComparator implements Comparator<String>
{ public int compare(String o1, String o2) {
//只要热词1的搜索次数比热词2大，认为在set中是“大的”
if(hotwords.get(o1)>hotwords.get(o2))
return 1;
else
return -1;
} }
//从热词库中，查找以指定搜索词开头的热词。并按热度排序
private Set<String> findHotWords(String begin)
{
//"abcd".indexOf("b") ==》1
//"abcd".indexOf("a") ==》0 Set<String> result = new TreeSet<String>(new MyHotWordComparator());
//按遍历热词库
for(String key:hotwords.keySet())
{
if(key.indexOf(begin)==0) //子串的位置是0
{
result.add(key); //由于使用自定义比较器，所以"索引"是有序的
}
}
return result;
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
} /**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doPost(request,response);
} /**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//1 读取请求参数的中“搜索词"
String word = request.getParameter("word");
//2 去热词库匹配,获得满足的所有热词set
Set<String> result = findHotWords(word);
//3 组成div中的子html并返回
String html = "<ul>";
int i = 1;
for(String str:result)
{
//给li的id进行编号，并且制定鼠标移入和点击事件
html += "<li id='t"+i+"' onmouseover='highlight(this.id)' " +
"onclick = 'doclick(this.id)'>"+str+"</li>";
i++;
}
html+="</ul>";
PrintWriter out = response.getWriter();
out.print(html);
out.flush();
out.close();
} /**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
} }
智能提示框---bai的更多相关文章
- winform下的智能提示框
winform下的智能提示框 最近在搞winform的程序,接触到有些可能以后还会用到的功能,所以写到博客园里去,第一可以加深自己的印象,第二可以在以后再遇到同样问题的时候忘记了可以马上回来看看,第三 ...
- 解决input中智能提示框onblur与onclick冲突的问题
背景: 制作一个类似百度输入法的智能提示框, 其中当关键词输入进来时,会有智能提示展开,实际需求是当点击智能提示框的汉字时,输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏,如下 ...
- WPF制作的一个小功能,智能提示(IntelliSense)
原文http://www.cnblogs.com/scheshan/archive/2012/06/30/2570867.html 最近WPF项目中遇到一个需求,需要给一个RichTextBox添加智 ...
- 【jQuery】jquery-ui autocomplete智能提示
jQuery UI,简而言之,它是一个基于jQuery的前端UI框架.我们可以使用jQuery + jQuery UI非常简单方便地制作出界面美观.功能强大.跨浏览器兼容的前端html界面. Auto ...
- jQuery打造智能提示插件二（可编辑下拉框）
在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- Ternary Search Tree 应用--搜索框智能提示
前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...
- 使用jsonp跨域调用百度js实现搜索框智能提示（转）
http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...
- Servlet+Ajax实现搜索框智能提示
简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...
随机推荐
- 多校hdu5726 线段树＋预处理
第一问是没有修改的线段树,第二问暴力预处理,因为gcd的结果不会很多 在预处理阶段需要把每个区间的gcd相等的数量储存起来(用map容器),在一个序列例如:12467,枚举左区间L直到n此处时间为O( ...
- 单选框radio 选择问题
<input type="radio" name="test"/> <input type="radio" name= ...
- 软件体系结构C2风格
首先C2风格是最常用的一种软件体系结构风格.(下图为一个C2风格的架构图) C2是一种基于构件和消息的架构风格,可用于创建灵活的.可伸缩的软件系统.一个C2构架可以看成是按照一定规则由连接件连接的许多 ...
- 【转】Android应用中使用AsyncHttpClient来异步网络数据
摘要: 首先下载AsyncHttpClient的库文件,可以自行搜索,可以到下面地址下载 http://download.csdn.net/detail/xujinyang1234/5767419 测 ...
- JProgressBar与Timer的配套使用
JProgressBar 的关键在于 setMaxium(int maxValue) 和 setValue(int progressValue); 当ProgressBar的当前值需要Control ...
- Tensorflow中的命名空间scope
1.name_scope 在tensorflow中有两种声明变量的方式,tf.get_variable()和tf.Variable(). name_scope对于tf.get_variable()无效 ...
- review01
.java叫源文件,java编译器编译源文件后会产生字节码文件,java解释器将字节码文件加载进内存,java虚拟机来执行字节码文件. 如下列文件名为“String01.java” public cl ...
- 解决：cmd中运行monkeyrunner monkey_recorder.py报错: Can't open specified script file
看lynnLi的博客monkeyrunner之录制与回放(七),遇到了一个问题,我在cmd中输入monkeyrunner monkey_recorder.py,却报错了: 当时第一个感觉时,先到\sd ...
- Mac开机启动
1. Finder打开资源库的LaunchAgents目录. 打开Finder,按⇧⌘G,输入 /Library/LaunchAgents/ 以及 ~/Library/LaunchAgents/ 2. ...
- LKDBHelper Sqlite操作数据库
首先这里要说明一下,为什么用FMDB而不用Core Data呢,因为我们不知道Core Data是如何映射对象里面的属性关系的,如果我们更改了属性的话,就会报错 首先是创建LKDBHelper对象 L ...