js模仿搜索引擎自动提示

最新推荐文章于 2024-07-23 11:07:53 发布

weixin_30612769

最新推荐文章于 2024-07-23 11:07:53 发布

阅读量77

点赞数

文章标签： json java javascript ViewUI

原文链接：http://www.cnblogs.com/qingmaple/p/4149321.html

版权

在文本框中随着输入的值显示相关的数据，类似于搜索引擎

测试数据放在xml文件中:

1,sourceInfo.xml

<?xml version="1.0" encoding="UTF-8"?>
<list>
    <label id="a">
        <content>abuse</content>
        <content>abstract</content>
        <content>accede</content>
        <content>accelerate</content>
        <content>accent</content>
        <content>adverb</content>
        <content>adverse</content>
        <content>accent</content>
        <content>accelerate</content>
        <content>advance</content>
        <content>affect</content>
    </label>
    <label id="b">
        <content>bake</content>
        <content>baggy</content>
        <content>ball</content>
        <content>band</content>
        <content>bed</content>
        <content>beck</content>
    </label>
    <label id="c">
        <content>copy</content>
        <content>condition</content>
        <content>conduct</content>
    </label>
</list>

2,jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>模仿搜索引擎      ---- maple 2014.09.08</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">
    -->
    <style type="text/css">        
        body{
            width:800px;
            margin:100px auto;
        }
        #rel{
            position:absolute;
            width:450px;
            height:305px;
            top:200px;
            left:400px;            
        }
        #box{            
            position:absolute;
            width:560px;
            height:50px;
            top:150px;
            left:400px;            
        }
        
        #txtContent{
            border:1px solid green;
            width:450px;
            height:50px;
            line-height:50px;
            font-size:25px;
            float:left;
        }
        
        a{
            text-decoration:none;
            width:110px;
            height:50px;
            
            font-size:22px;
            text-align:center;
            font-weight:bold;
            line-height:50px;
            display:block;
            color:white;
            float:right;
            background-color:#23AC3E;
        }
        ul{            
            padding:0px;            
            margin:0px;            
        }
        li{
            padding-left:5px;
            list-style:none;
            font-size:25px;
        }
        .focus{
            background-color:#efefef;
        }
        .myUl{
            border:1px solid #ccc;
        }
    </style>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript">
    var txtContent; //保存文本框对象    
    var rel; //保存智能提示用的div对象
    var ul; //无序列表对象，放每个提示信息
    var focus; //按上下键时，保存当前选中项这个li对象
    
    var JSONAjax={
    
        xmlHttpreq : false,
                    
        createXMLHttpReq : function() {  //创建XHR对象
            if (window.XMLHttpRequest) {
                // Mozilla
                xmlHttpreq = new XMLHttpRequest();
            } else {
                // IE
                if (window.ActiveXObject) {
                    try {// 比较新的版本
                        xmlHttpreq = new ActiveXObject("Msxml2.XMLHttp");
                    } catch (e) {
                        try {// 失败就创建比较老的版本
                            xmlHttpreq = new ActiveXObject("Microsoft.XMLHttp");
                        } catch (e) {
                        // 还失败就回家种田
                        }
                    }
                }//end of if
            }//end of else
        }, //end of create
    
        //发送请求（核心！！！）
        sendreq : function(value) {
            url="ReminderServlet?content="+value;
            //调用创建XMLREQ对象 的方法
            JSONAjax.createXMLHttpReq();
            //指定回调函数
            xmlHttpreq.onreadystatechange= JSONAjax.handleResponse;
            //建立连接
            xmlHttpreq.open("GET", url, true); //异步传输
            //发送数据
            xmlHttpreq.send(null);
        },
        
        //处理响应
         handleResponse:function() {
        // 判断XHR的状态
            if (xmlHttpreq.readyState == 4) {                
                // 回应的状态=200,表示成功返回了服务器的内容
                if (xmlHttpreq.status == 200) {                    
                    var str=xmlHttpreq.responseText;    
                    
                    var obj=JSON.parse(str);//解析成json对象
                    var len=ul.childNodes.length;            
                    //移除ul原有项        
                    for(var j=0;j<len;j++){                        
                        ul.removeChild(ul.firstChild);                        
                    }                        
                    //规定最多显示10条提示信息                
                    var count=obj.count>10?10:obj.count;    
                    //动态添加提示信息                
                    for(var i=0;i<count;i++){
                        var li=document.createElement("li");                        
                        var txt=document.createTextNode(obj["a"+i]);
                        li.appendChild(txt);
                        ul.appendChild(li);
                    }
                    //如果ul中有li项，则通过添加类样式来显示边框
                    if(ul.childNodes.length>0){
                        ul.className="myUl";
                    }else{  //如果没有了提示项，则去除类样式
                        ul.className="";
                    }
                }//end status==200
            }//end readyState==4
        }, //end handleResponse
        
        //为组件添加事件：组件，要绑定的事件类型，处理事件的函数，是否捕获
        addEvent: function(elm, evType, fn, useCapture){
                    //支持火狐
                    if (elm.addEventListener){
                            elm.addEventListener(evType, fn, useCapture);
                            return true;
                    } else if (elm.attachEvent) {
                    //支持IE
                        var r = elm.attachEvent('on' + evType, fn);
                        return r;
                    } else {
                        elm['on' + evType] = fn;
                    }
                },
            
            //初始化
            init:function(){
                txtContent=document.getElementById("txtContent");
                rel=document.getElementById("rel");
                
                ul=document.createElement("ul");                        
                rel.appendChild(ul);//显示提示信息的无序列表放在id=rel的div块中
                focus=null;
                
                txtContent.onkeyup=function(event){
                    var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
                    if(keyCode==38){ //向上方向键
                        //alert("up");
                        if(focus!=null&&focus!=ul.childNodes[0]){
                            focus.className="";
                            focus=focus.previousSibling;
                            focus.className="focus";
                            //把方向键选择项的值放在文本框中
                            txtContent.value=focus.textContent;
                        }                        
                        return;
                        
                    }else if(keyCode==40){ //向下
                        //alert("down");
                        if(focus==null){
                            focus=ul.childNodes[0];                            
                        }else if(focus==ul.lastChild){                            
                            return;
                        }else{
                            focus.className="";
                            focus=focus.nextSibling;                            
                        }            
                        txtContent.value=focus.textContent;            
                        focus.className="focus";                        
                        return;        
                                        
                    }else if(keyCode==13){  //回车
                        window.location.href="http://www.baidu.com";
                    }                    
                    JSONAjax.sendreq(this.value);
                };
            },
            
    }; //end of JSONAjax
            
    //初始化[相当于调用 了<body οnlοad="fn"> ]
    JSONAjax.addEvent(window,'load',JSONAjax.init,false);
    
    </script>
  </head>
  
  <body>      
    <div id="box">
    <input type="text" name="txtContent" id="txtContent">
   <a href="#">千寻一下</a>
    </div>
    <div id="rel">
    </div>
   
  </body>
</html>

3，servlet

package com.maple.servlet;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.jdom.Document;
import org.jdom.Element;
import org.jdom.JDOMException;
import org.jdom.input.SAXBuilder;

public class ReminderServlet extends HttpServlet {

    /**
     * Constructor of the object.
     */
    public ReminderServlet() {
        super();
    }

    
    public void destroy() {
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }
    
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");        
        PrintWriter out = response.getWriter();
        //获取输入的文本内容
        String content=request.getParameter("content");
        SAXBuilder sax=new SAXBuilder();
        File file=new File("E:\\myJava\\javafrom20140825\\myself\\assignment_mockbaidu\\src\\sourceInfo.xml");
        
        try {
            Document doc=sax.build(file);
            Element root =doc.getRootElement(); //list
            List labels=root.getChildren("label");
            String id=null;
            
            //用于保存目标标签块，例如输入abu,则保存a标签块的内容
            Element target=null; 
            JSONObject job=new JSONObject();
            
            //寻找与输入的首字母相同的标签块
            for(int i=0;i<labels.size();i++){
                id=((Element)(labels.get(i))).getAttributeValue("id");
                if(content.indexOf(id)==0){
                    target=(Element)(labels.get(i));    
                    break;
                }
            }
            //如果找到了与首字母匹配的标签块
            if(target!=null){
                List con=target.getChildren("content");
                int count=0;
                for(int j=0;j<con.size();j++){
                    Element temp=(Element)(con.get(j));
                    String tempContent=temp.getText();        
                    
                    //如果content标签内的值与文本值前面相同，则保存在json对象中，
                    //这是真正的有效值，需要回传给客户端
                    if(tempContent.indexOf(content)!=-1){                        
                        job.put("a"+count, tempContent);
                        ++count;                        
                    }                                
                }
                //最后加上有效键值对的个数，方便客户端读取
                job.put("count", count);
            }
            out.print(job);
            
        } catch (JDOMException e) {            
            e.printStackTrace();
        }
        out.flush();
        out.close();
    }
    
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request,response);
    }

    
    public void init() throws ServletException {
        // Put your code here
    }

}

转载于:https://www.cnblogs.com/qingmaple/p/4149321.html

weixin_30612769

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js模仿搜索引擎自动提示

在文本框中随着输入的值显示相关的数据，类似于搜索引擎测试数据放在xml文件中:1,sourceInfo.xml<?xml version="1.0" encoding="UTF-8"?><list> <label id="a"> <content>abuse</content> ...
复制链接

扫一扫