请教想google主页上键入文字自动搜索功能的输入框怎么实现(页 1) - Ajax论坛

高阁逆风 发表于 2007-12-26 21:28

请教想google主页上键入文字自动搜索功能的输入框怎么实现

不惑发表于 2007-12-27 11:07

第一步使用键盘响应事件．
第二步用ＡＪＡＸ提交．
最后一步提示该什么做还不知道．

高阁逆风 发表于 2007-12-27 19:24

回复 2# 的帖子

能不能具体点，详细点，有源代码更好！！

rindybo 发表于 2007-12-27 20:32

XMLHttp异步加载

不惑发表于 2008-1-9 19:01

原代码要实现了有点麻烦,因为至少要有数据库来支持吧?
正常显示的页面:(输入框和其它内容自己加,这儿只写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]]

kevintang 发表于 2008-2-14 14:47

ajaxpro

如果用ajaxpro 类库很容易解决的!想要的话加我QQ414988954

ming206 发表于 2008-2-18 16:34

基本能实现：
（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 java.io.PrintWriter;
//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> </td>");
      strbf.append("<td><div align=\"right\"><a href=\"javascript:void(0)\" onClick=\"closeDiv()\">关闭</a> </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");
}
  }

}

页: [1]