智能提示框---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和 ...
随机推荐
- UVA 11186 Circum Triangle （枚举三角形优化）（转）
题意:圆上有n个点,求出这n个点组成的所有三角形的面积之和 题解: 当我们要求出S(i,j,k)时,我们需要假设k在j的左侧,k在i与j之间,k在i的右侧. 如果k在 j的左侧 那么 S(i,j,k ...
- QT 文本html显示格式的问题，如在QTextBrowser.setText用tr(),其中为html格式
QObject::tr("<h1><font color = green>%1</font>的人品指数:<font color = orange&g ...
- js中出现问题--Type Syntax error on token "catch", Identifier expected jquery.js
解决方案: 1.选中jQuery报错的web工程: 2.右键-->Myeclipse-->Exclude From Validation,选中: 3.继续右键Myeclipse--> ...
- CentOS 7.3 关闭默认防火墙&远程登录
小编作为一个运维新人,踩坑之路是必不可少的. 这不,新来了一家公司,做云运维工程师,新的环境,网络和之前的都不一样,VMware Workstation虚拟机上的网 ...
- C++中int转string与string转int
#include "stdafx.h" #include "string" #include "iostream" #include &qu ...
- jsp用tags传递参数
<computer:trangleTag sideA="12" sideB="12" sideC="12"/>表示以字符串传递s ...
- hdu 5238 Calculator（线段树，中国剩余定理￥）
Calculator Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Tot ...
- HDU 1052 贪心+dp
http://acm.hdu.edu.cn/showproblem.php?pid=1052 Tian Ji -- The Horse Racing Time Limit: 2000/1000 MS ...
- iostat相关参数说明——await：平均每次设备I/O操作的等待时间 (毫秒)，如果%util接近 100%，说明产生的I/O请求太多
iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出 CPU使用情况.同vmstat一样, ...
- 关于一家大型互联网公司的.NET面试
上周去了一家大型的互联网公司去面试!四个面试官提的问题整理下!以后会注明答案! 1.关于垃圾回收的过程!GC的过程 其中包含:什么是根,Finalize与Dispose的区别,什么时候用到!IDisp ...