使用Ajax实现百度下拉框

百度下拉框

在使用百度搜索时，在输入框中输入部分文字后，下面会将与该文字相关的词组展示出来，该功能就可以使用ajax来实现。
注册输入框的onkeyup事件，该事件触发时，将输入框中填写的内容使用ajax发送到servlet中，在servlet中根据用户的输入去数据库中查询，之后将查询出的数据再发送给jsp中，最后将该数据展示在页面即可。

效果图（当然这里页面做的比较简单）：输入一个火字即出现以下效果，并可以点击使文本框中内容变为点击的内容。

代码如下(注：其中引用的MyAjax.js在上一个博客）：

首先是JSP(baidu.jsp):

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度下拉框</title>
</head>
<body><!-- 用户输入框 -->
<div id="divsearch"><input type="text" name="name" id="name" /><input type="submit" value="搜索"></div>
<!-- 下拉提示框 -->
<div id="tips" style="display: none; border: 1px solid red; background-color: white; width: 171px; top: 135px;"></div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/MyAjax.js"></script>
<script type="text/javascript">window.onload = function(){var searchElement = document.getElementById("name");//获取下拉提示框的div对象var div = document.getElementById("tips");//给输入框注册按键弹起事件searchElement.onkeyup = function(){//获取输入框的值var name = this.value;//如果输入框没有内容，将下拉提示框隐藏if(name == ""){div.style.display = "none";return;}//获取XMLHttpRequest对象var xhr = getXMLHttpRequest();//回调函数xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){var str = xhr.responseText;//获取服务器返回的数据if(str == ""){return;}//返回数据格式以","区分的字符串，例如：monkey,小猴子,1024//var result = str.split(",");//result:{"monkey","小猴子","1024"}//使用json格式进行数据传输var result = JSON.parse(str);var childDivs = "";//循环把数据放入到div中for(var i=0; i<result.length; i++){childDivs += "<div onclick='writeText(this)' onmouseover='changeBackgroundColor(this)' onmouseout='recoverBackgroundColor(this)'>" + result[i] + "</div>";//childDivs += "<div>"+result[i]+"</div>";}console.log(childDivs);//把多个childDivs放入列表div中div.innerHTML = childDivs;//将列表显示div.style.display = "block";}}}xhr.open("get","${pageContext.request.contextPath}/search?name="+ name+"&time="+new Date().getTime());xhr.send(null);}}//将文本填充到搜索框function writeText(div){//获取搜索框对象var searchElement = document.getElementById("name");//将选中的div的值添加到搜索框中searchElement.value = div.innerHTML;//将下拉提示框隐藏div.parentNode.style.display = "none";}//鼠标悬浮时，改变背景色function changeBackgroundColor(div){div.style.backgroundColor = "orange";}//鼠标离开时，回复背景色function recoverBackgroundColor(div){div.style.backgroundColor = "";}
</script>
</html>

Servlet部分（SearchServlet.java)：

package com.rong.servlet;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSONArray;/*** Servlet implementation class SerchServlet*/
@WebServlet("/search")
public class SerchServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//解决乱码问题request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");//获取Ajax传过来的数据String name = request.getParameter("name");//根据用户的输入查询数据库，这里省略数据库的操作，手动创建一个ListList<String> result = new ArrayList<>();result.add("火影忍者");result.add("火影博人传");result.add("火影还在更吗");result.add("火影鸣人");result.add("火花");//把集合中的数据转换为字符串返回到网页String str = "";//如果用户输入的内容是以m开头的话，则将数据返回if(name.startsWith("火")){
//            for (int i = 0; i < result.size(); i++) {
//                if(i>0){
//                    str+=",";
//                }
//                str+=result.get(i);
//            }//使用Json格式进行数据传输str = JSONArray.toJSONString(result);}System.out.println(str);//把数据响应到客户端response.getWriter().write(str);}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}

使用Ajax实现百度下拉框相关推荐

什么叫百度下拉框？除了百度下拉还有哪些下拉词框可以优化？
什么叫百度下拉框百度下拉框的官方称呼是百度搜索推荐词(BaiduSuggestWord),又称作百度搜索联想词或百度搜索下拉列表.又统称为百度下拉框.百度下拉词! 此功能是百度搜索为了更好地便捷众多 ...
PYTHON批量挖掘百度下拉框关键词
百度下拉框的关键词,一直是SEO关键词拓展的利器,只要在搜索框中输入一个关键词,就可以得到一批相关词.我有个小技巧,可瞬间提升上百倍的挖掘效率.并且通过Python实现后,完全可用于大规模关键词的批量 ...
百度下拉框教学能否成为一种营销方式
百度下拉框教学能否成为一种营销方式近期有商友问下拉哥姜泽一个比较有意思的问题,今天与小伙伴们一起分享一下,这个问题就是百度下拉框与相关搜索能否成为主流营销方式,能否通过百度下拉框教学提升企业知名度, ...
PYTHON批量挖掘百度下拉框关键词–转{张亚楠}
百度下拉框的关键词,一直是SEO关键词拓展的利器,只要在搜索框中输入一个关键词,就可以得到一批相关词.我有个小技巧,可瞬间提升上百倍的挖掘效率.并且通过Python实现后,完全可用于大规模关键词的批量 ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
ajax 遍历select 下拉框
html :<select id="type" > </select> js代码: <script type="text/javascr ...
select2 ajax demo,Select2下拉框示例
在项目中,需要用到下拉框,于是找到了这个比较好用的select2插件,功能很强大,几乎能满足所有的下拉选择需求,选中之后可以点击取消选择的,另,本例连同ajax获取选择的数据一并提供. 添加极限活动 ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
ajax验证下拉框,ajax 遍历select 下拉框(示例代码)
html : js代码: //动态绑定下拉框项 function addnotice() { $.ajax({ url: "${pageContext.request.contextPath ...

使用Ajax实现百度下拉框

百度下拉框

使用Ajax实现百度下拉框相关推荐

最新文章

热门文章