| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 3537 人关注过本帖
标题:请教想google主页上键入文字自动搜索功能的输入框怎么实现
只看楼主 加入收藏
高阁逆风
Rank: 5Rank: 5
等 级:职业侠客
威 望:8
帖 子:508
专家分:321
注 册:2006-4-29
结帖率:100%
收藏
 问题点数:0 回复次数:6 
请教想google主页上键入文字自动搜索功能的输入框怎么实现
请教想google主页上键入文字自动搜索功能的输入框怎么实现
搜索更多相关主题的帖子: google主页 文字 搜索 键入 
2007-12-26 21:28
不惑
Rank: 2
等 级:论坛游民
威 望:2
帖 子:569
专家分:13
注 册:2007-3-22
收藏
得分:0 
第一步使用键盘响应事件.
第二步用AJAX提交.
最后一步提示该什么做还不知道.
2007-12-27 11:07
高阁逆风
Rank: 5Rank: 5
等 级:职业侠客
威 望:8
帖 子:508
专家分:321
注 册:2006-4-29
收藏
得分:0 
回复 2# 的帖子
能不能具体点,详细点,有源代码更好!!

      上天安排我做了个多情的人,却又安排我遭遇了无数绝情的人,所以我最终把自己磨练成了一个滥情的人。别人是人见人爱,我是见人爱人.......
2007-12-27 19:24
rindybo
Rank: 2
等 级:论坛游民
帖 子:126
专家分:51
注 册:2007-3-8
收藏
得分:0 
XMLHttp异步加载

[ffg,#6CCFF7,#FFFFFF] ←★→┠最┨┠愛┨┠伱┨┠了┨←★→ [/ft]
2007-12-27 20:32
不惑
Rank: 2
等 级:论坛游民
威 望:2
帖 子:569
专家分:13
注 册:2007-3-22
收藏
得分:0 
原代码要实现了有点麻烦,因为至少要有数据库来支持吧?
正常显示的页面:(输入框和其它内容自己加,这儿只写JS内容)
<script language=javascript>
<!--
var nam
document.onkeydown=keyCortrol; /* 定义键盘按下时执行的函数 */
if(document.layers) document.captureEvents(Event.KEYDOWN); /* Netscape需要捕获键盘事件 */
function keyCortrol(e){
if (document.getElementById("你的输入框名").value!="")
  send_request('ddd.asp?str='+document.getElementById("你的输入框名").value) //送出请求
}
  var http_request=false;
function CreateHttpRequest(){
try{return new ActiveXObject('MSXML2.XMLHTTP.4.0');}
catch(e){
try{return new ActiveXObject('MSXML2.XMLHTTP.3.0');}
catch(e){
try{return new ActiveXObject('MSXML2.XMLHTTP.2.6');}
catch(e){
try{return new ActiveXObject('MSXML2.XMLHTTP');}
catch(e){
try{return new ActiveXObject('Microsoft.XMLHTTP');}
catch(e){
try{return new XMLHttpRequest();}
catch(e){return null;}}}}}}}


  function send_request(url){
    http_request=false;
    if (window.XMLHttpRequest){
       http_request=new CreateHttpRequest();
       if(http_request.overrideMimeType){
           http_request.overrideMimeType("text/xml");
       }
    }else if(window.ActiveXObject){
        try{
           http_request=new ActiveXObject("Microsoft.XMlHTTP");
           }catch(e){
    }
  }
  if (!http_request){
     window.alert("不能创建XMLHttpRequest对象实例!");
     return false;
  }
  http_request.onreadystatechange=processRequest;
  http_request.open("GET",url,true);
  http_request.send(null);
}
  function processRequest(){
     if(http_request.readystate==4){
        if (http_request.status==200){
          if (http_request.responseText!=""){  //有请求内容
        //进行本输入框的下拉选择显示,不好意思,我还不会.
           }else{
            alert("无返回内容!");  //哈哈,这一句当然可以不要
          }
        }else{
           alert("您所请求的页面有异常!");
        }
      }
   }
</script>
那个提交的页面只要以提交上来的字符串为条件在数据库中进行查找,把找到的数据生成xml就可以了.

[[italic] 本帖最后由 不惑 于 2008-1-9 19:03 编辑 [/italic]]
2008-01-09 19:01
kevintang
Rank: 4
等 级:业余侠客
威 望:9
帖 子:799
专家分:236
注 册:2008-2-14
收藏
得分:0 
ajaxpro
如果用ajaxpro 类库 很容易解决的!想要的话加我QQ414988954
2008-02-14 14:47
ming206
Rank: 2
来 自:重庆
等 级:等待验证会员
威 望:3
帖 子:545
专家分:7
注 册:2005-8-2
收藏
得分:0 
基本能实现:
(1):JS:

/*
 建立类似google的搜索引擎AJAX异步访问服务器
 */
function searchMe(){
    var keyWork=document.getElementById("keyWork");
    var s=keyWork.value;
    if(s=="") {
        return;
    }
    searchDIVfunction();
    //alert(keyWork);
    //keyWork.value="正在匹配数据库关键字......";
}
//选中关键字
function selectKeyWork(keyid){
    var k= document.getElementById(keyid);
    if(k.innerHTML!=""){
        document.getElementById("keyWork").value=k.innerHTML;
        document.getElementById("SearchListLayer").style.display="none";
    }else
       return;
}
//关闭层
function closeDiv(){
    document.getElementById("SearchListLayer").style.display="none";
}
//层的定位
function searchDIVfunction(){
    var sd=document.getElementById("SearchListLayer"); //获得层
    var keyT=document.getElementById("keyWork");
    //先不显示
    sd.style.display="none";
    //
    var url="myTest.ajaxTest.saveData.do?keyWork="+keyT.value;
    //alert(url);
    var Http = null;
    try{
        Http = new ActiveXObject("Microsoft.XMLHTTP");
    }catch(e){
        alert(e);
        return ;
    }
     //异常,创建对象失败
    if(Http==null){
         alert("不能创建XMLHttpRequest对象!");
         return false;  
    }
    Http.open("GET",url,true);
    Http.send(null);
    Http.onreadystatechange=function(){
        if(Http.readyState==4){
            if (Http.status==200){
                 var newText=Http.responseText;
                 //alert(newText);
                 if(newText=="err"){
                     return;
                 }else{
                        //alert("获得输入框居左:"+keyT.style.left);
                        sd.style.left=keyT.style.left;
                        //过滤px
                        sd.style.top=Number(keyT.style.top.replace("px",""))+17;
                        sd.style.width="250";
                        sd.style.display="";
                        //真正被填充的内容:
                        sd.innerHTML=newText;
                        //alert(newText);
                 }
            }else{
               alert("请求的页面不存在或存在异常......");
            }
        }
    }
}

(2)HTML:

<div id="rdiv2">
    <table width="360" border="0" align="center" cellpadding="0" cellspacing="0" >
      <form name="form1" method="post" action="">
        <tr>
          <td width="23%" >
            <input name="keyWork" type="text"  style="left:339; top:30;POSITION: absolute;" onKeyUp="searchMe();" class="myTable" id="keyWork" size="40">
          </td>
          <td width="23%" ><div align="center">
              <label>
              <input type="button" style="left:610; top:33;POSITION: absolute;"  name="Submit3" value="搜 索">
              </label>
            </div></td>
        </tr>
      </form>
    </table>
    <div id="SearchListLayer" style="display:none;"></div>
  </div>

(3),服务器处理(JAVA):

package com.bonc.dss.myTest.model;

import
//import 其他略

/**
 * AJAX测试  
 * @author 莫小明
 * @version 1.0
 */
public class ModifyDataModel extends ImeiModel
{
  
  public static final String DSS = "dss";
  //添加
  private String teleoperator_desc="";
  private String idx_no="";
  //修改
  private String indexID="";
  private String idxNo="";
  //删除ID号
  private String deleteID="";
  //搜索的关键字
  private String keyWork="";
  //抛出的对象
  private String[] updateMsg = null;
  //打印
  private PrintWriter out=null;
  
  public ModifyDataModel(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response, BONCExAction action)
  {
    super(mapping, form, request, response, action);
  }

  /**
   * 处理参数
   * @throws Exception
   */
  public void processParam() throws Exception
  {
    //添加参数的获取
    teleoperator_desc=General.convertNullToEmpty(request.getParameter("teleoperator_desc"));
    idx_no=General.convertNullToEmpty(request.getParameter("idx_no"));
    //编辑参数的获取
    indexID=General.convertNullToEmpty(request.getParameter("indexID"));
    idxNo=General.convertNullToEmpty(request.getParameter("idxNo"));
    //删除参数的获取
    deleteID=General.convertNullToEmpty(request.getParameter("deleteID"));
    //keyWork
    keyWork=General.convertNullToEmpty(request.getParameter("keyWork"));
    //设置页面的编码方式
    response.setContentType("text/html; charset=GBK");
  }

  /**
   * 处理逻辑
   * @throws Exception
   */
  public void processLogic() throws Exception
  {
    //添加
    if(!(teleoperator_desc.equalsIgnoreCase(""))
          &&!(idx_no.equalsIgnoreCase(""))){
      this.add();
    }
    //修改
    if(!(indexID.equalsIgnoreCase(""))
        &&!(idxNo.equalsIgnoreCase(""))){
      this.mod();
    }
    //删除
    if(!(deleteID.equalsIgnoreCase(""))){
      this.del();
    }
    //搜索相似关键字
    if(!(keyWork.equalsIgnoreCase(""))){
      this.searchKeyWorksList();
    }
  }

  /**
   * 搜索
   * @throws Exception
   */
  private void searchKeyWorksList() throws Exception {
    String sql=
      " select  to_char(count(*)) as c,TELEOPERATOR_DESC as k \n"+
      " from "+DSS+".DMCODE_TELEOPERATORS_T \n"+
      " Where  TELEOPERATOR_DESC like '"+this.keyWork+"%' \n "+
      " group by TELEOPERATOR_DESC ";
    try
    {
      Datastore ds=dc.retrieve(sql);
      out = response.getWriter();
      int count=ds.rowCount();
      log4j.info("count="+count);
      //装入StringBuffer
      if(count>0){
        StringBuffer strbf=new StringBuffer();
        strbf.append("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"  class=\"myTable\">");
        //获得记录集长
        //循环
        for(int i=1;i<=count;i++){
          strbf.append("<tr class=\"sStyle\" onClick=\"selectKeyWork('");
          strbf.append(i);
          strbf.append("');\" onMouseOver=\"this.className='sStyleOver'\" onMouseOut=\"this.className='sStyle'\"> \n ");
          strbf.append("<td id=\""+i+"\">");
          strbf.append(ds.getItemString(i,"k").trim());
          strbf.append("</td> \n ");
          strbf.append("<td class=\"reseFont\"  align=\"right\" >");
          strbf.append(ds.getItemString(i,"c").trim());
          strbf.append(" 结果</td> \n ");
          strbf.append("</tr> \n ");
        }
        strbf.append("<tr>");
        strbf.append("<td>&nbsp;</td>");
        strbf.append("<td><div align=\"right\"><a href=\"javascript:void(0)\" onClick=\"closeDiv()\">关闭</a>&nbsp;</div></td>");
        strbf.append("</tr>");
        strbf.append("</table>");
        log4j.info(strbf.toString());
        out.print(strbf.toString());
      }else{
        out.print("err");
      }
    }
    catch (Exception e)
    {
      out.print("err");
    }
  }

}

外贸综合平台:E贸通
2008-02-18 16:34
快速回复:请教想google主页上键入文字自动搜索功能的输入框怎么实现
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.014298 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved