智能提示框---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和 ...
随机推荐
- 【bzoj3238】差异[AHOI2013]（后缀数组+单调栈）
题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3238 这道题从大概半年以前就开始啃了,不过当时因为一些细节没调出来,看了Sakits神犇 ...
- js正则表达式验证（化繁为简）
以前用js写正则表达式验证,每一个文本框后面都要添加一个onblur函数,验证的信息少,也没体会到有多繁琐,这次项目中的页面比较多,页面中的信息也比较多,如果每个文本框都加一个验证函数的话,js验证代 ...
- jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链
隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度, ...
- 51nod 1363 最小公倍数的和 欧拉函数+二进制枚举
1363 最小公倍数之和 题目来源: SPOJ 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 160 给出一个n,求1-n这n个数,同n的最小公倍数的和.例如:n = 6,1,2,3 ...
- volist/foreach下，点击循环中的一个进行操作
第一种方法,是给点击元素绑定事件,用ajax将值传到控制器中,其中传的值,用jquery选择器选择值. 1.在html中 <foreach name="save" item= ...
- Python OS导入一个文件夹所有文件
import os path = 'F:/save_file/seminarseries/' for root, dirs, files in os.walk(path): print(root) 这 ...
- hibernate学习（2）
1 实体类编写规则 2 hibernate主键生成策略 3实体类操作 (1)crud操作 (2)实体对象状态 4 hibernate的一级缓存 5 hibernate事务操作 (1)事务代码规则写法 ...
- 我总结的js变量、数组、对象等基础知识
我的第一篇博客 ——JS的那些基础概念 第一次写,也不知道有没有什么套路,需不需要注意文采之类的.不管了,我就直接写主要内容吧!下面是我总结的一些关于JS的基础概念: [变量]从字面上面,变量是可变的 ...
- Sublime Text 3总是出现“1 missing dependency was just installed.”
Sublime Text 3总是出现“1 missing dependency was just installed.” 原因及结果 https://github.com/wbond/package_ ...
- 条款49：了解new-handle行为
多线程下的内存管理与单线程下是完全不同的,因为heap是一个可以被全局改动的资源,所以所有的线程都有可能去访问这一资源,这回导致很多的race_conditions. 当operator new未 ...