智能提示框---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和 ...
随机推荐
- MySQL锁机制和PHP锁机制
模拟准备--如何模拟高并发访问一个脚本:apache安装文件的bin/ab.exe可以模拟并发量 -c 模拟多少并发量 -n 一共请求多少次 http://请求的脚本例如:cmd: apache安装路 ...
- MapReduce-多个Mapper
MapReduce的多输入.多mapper 虽然一个MapReduce作业的输入可能包含多个输入文件(由文件glob.过滤器和路径组成),但所有文件都由同一个InputFormat和同一个Mapper ...
- table-layout 属性
最近被测试提了一个bug,表单的某个字段有1300的字数限制,测试填了1300字,提交后,表格上的呈现丑爆了,那个字段的所在的列撑满了整个表格,其他列被压缩的很小. 后来知道了table-layout ...
- 广西邀请赛 B+K
B是一个看起来很KDT的题 但是因为KDT是n^1.5的所以t 而且因为KDT需要周期性的重建所以复杂度会更高 因为只有51种颜色 所以想当然的就去想了状态压缩 因为询问的区间范围 x一定是从1开 ...
- 转：Android命令Monkey压力测试，详解
停止Monkey命令: 1. ps命令 查找uiautomator的进程 打开cmd命令行窗口 输入: adb shell ps | grep monkey 返回来的第一个数字,即是monkey的进 ...
- rsync工具
rsync工具 一.介绍 1.可以实现 本地数据 <----------> 远程数据/本地数据 的传输 2.两种通信方式(man rsync) (1)remote shell(一个冒号 ...
- 双十字路口交通仿真程序（VS2010+MFC）
这个程序是我上研二上学期时下一届师弟师妹们的面向对象课程大作业,当时我正好看过两三本 C++ 书籍,虽然忙着项目,但还是忙里偷闲检验了下自己.从设计到实现,耗时一周左右,完成于 2013 年年底. 虽 ...
- 177. Nth Highest Salary
问题描述 解决方案 CREATE FUNCTION getNthHighestSalary(N INT) RETURNS INT BEGIN declare number int; set numbe ...
- 阿里的druid
Druid首先是一个数据库连接池,但它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库,一个SQL Parser. Druid支持所有JDBC兼容的数据库,包括 ...
- mysql 初识数据库
一 数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件 ...