<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>suggest ajax示例</title>

<meta name="author" content="geovindu 塗聚文"/><style type="text/css">

.ajaxsearch {

 width:300px; /*提示层的宽度 */

</style>

<script language="javascript" src="suggestajax.js" type="text/javascript"></script> 

</head> 

<body onResize="removediv();">

<div style="margin:20px 50px">

<input style="width:298px;height:18px" type="text" autocomplete="off" onBlur="blurdeal();" onKeyDown="keydowndeal(event);" onFocus="focusdeal(event);" />

</div>

</body>

</html>

suggestajax.js:

///////////////////////////////搜索提示框/////////////////////////////////

var obj_div;     //提示层对象

var obj_input;     //输入框对象

var main_delay;     //判断值变化延迟对象

var ajax_delay;     //ajax延迟搜索对象

var updown_delay;    //方向键延迟对象

var ajax_xmlhttp;    //ajax对象

var div_word=null;    //当前提示层对应的搜索值

var li_num=-1;     //伪光标位置,提示层被选中的li序号,从0开始

var li_down=-1;     //鼠标按下提示层的序号

var value_ed="";    //输入框延迟前的值

var value_ing="";    //输入框当前的值

var value_unexit="";   //搜索过没有结果的值开头

var updown_run=false;   //允许方向键上下

var ajax_run=false;    //true为正常进程,false停止ajax

var ajax_run_ing=false;   //true正在运行,false空闲

var input_focus=false;   //文本框焦点

var url="ajax.asp";    //后台地址**********************************************************

var time_delayajax=300;   //搜索延迟**********************************************************

var time_delayupdown=100;  //方向键延迟********************************************************  

var $=function(Fun_id){

 return document.getElementById(Fun_id);

}

try{

 ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');

}catch(e){

 try{

  ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');

 }catch(e){

  try{

   ajax_xmlhttp= new XMLHttpRequest();

  }catch(e){ajax_xmlhttp=null;}

 }

}

////////////////////////创建提示层////////////////////////

function createajaxdiv(){

 var create_div = document.createElement("div");

 create_div.type = "div";

 var promptdiv = document.body.appendChild(create_div);

 promptdiv.className = "ajaxsearch";

 obj_div=promptdiv;

}

////////////////////////设置提示层位置////////////////////////

function removediv(){

 if(!obj_div || !obj_input)return false;

 if(obj_div.style.display=="none")return false;

 var obj=obj_input;

 var xtop=0;

 var xleft=0;

 while(obj){

  xtop += obj["offsetTop"];

  xleft += obj["offsetLeft"];

  obj = obj.offsetParent;

 }

 obj_div.style.left = xleft + "px";

 obj_div.style.top = (xtop + 20) + "px";    //20差不多是输入框的高度,请根据实际情况调整************************************************************8

 li_down=-1;

}

////////////////////////隐藏提示层////////////////////////

function hideajaxdiv(){

 obj_div.style.display="none";

 li_down=-1;

}

////////////////////////设置被选<li>css样式////////////////////////

function setlistyle(){

 for(var i=0;i<obj_div.firstChild.childNodes.length;i++){

  obj_div.firstChild.childNodes[i].id="";

 }

 if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id="liseleted";

}

////////////////////////鼠标经过提示层////////////////////////

function overli(Fun_seletedlinum){

 if(li_num==-1)value_ing=obj_input.value;

 li_num=Fun_seletedlinum;

 setlistyle();

}

////////////////////////鼠标拖动提示层////////////////////////

function moveli(){

 if(window.getSelection){

  setfocus();

  window.getSelection().removeAllRanges();

 }else{

  document.selection.empty();

  setfocus();

 }

}

////////////////////////鼠标按下提示层////////////////////////

function downli(Fun_seletedlinum){

 if(!obj_input)return false;

 li_down=Fun_seletedlinum;

 input_focus=true;

}

////////////////////////鼠标弹起提示层////////////////////////

function upli(Fun_seletedlinum,Fun_event){

 if(!obj_input)return false;

 if(Fun_event.button==2){li_down=-1;return}

 if(li_down!=Fun_seletedlinum){

  li_down=-1;

  return false;

 }

 clearTimeout(ajax_delay);

 clearTimeout(updown_delay);

 updown_run=true;

 ajax_run=false;

 ajax_run_ing=false;

 li_num=-1;

 div_word=null;  

 value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;

 obj_input.value=value_ed;

 value_ing=value_ed;

 hideajaxdiv();

 obj_div.innerHTML="";

}

////////////////////////设置文本框获取焦点///////////////////////

function setfocus(){

 if(window.event){

  var r = obj_input.createTextRange();

  r.moveStart('character',obj_input.value.length);

  r.collapse(true);

  r.select();

 }else{

  obj_input.selectionStart=obj_input.value.length;

  obj_input.focus();

 }

}

////////////////////////文本框失去焦点////////////////////////

function blurdeal(){

 if(input_focus==true){

  setfocus();

  setTimeout("setfocus()");

  return false;

 }

 updown_run=false;

 ajax_run=false;

 ajax_run_ing=false;

 clearInterval(main_delay);

 clearTimeout(ajax_delay);

 clearTimeout(updown_delay);

 hideajaxdiv();

 if(value_ed!=obj_input.value)obj_div.innerHTML="";

}

////////////////////////文本框获取焦点////////////////////////

function focusdeal(Fun_event){

 if(!obj_div)createajaxdiv();

 if(input_focus==true){

  input_focus=false;

  return false;

 }

 var obj=((window.event)?Fun_event.srcElement:Fun_event.target);

 if(obj.type!="text")return false;

 updown_run=true;

 ajax_run=true;

 ajax_run_ing=false;

 if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=""){

  obj_div.style.display="block";

  removediv();

 }else{

  obj_input=obj;

  value_ed=obj.value;

  value_ing=obj.value;

  value_unexit="";

  li_num=-1;

  li_down=-1;

  div_word=null;

  obj_div.innerHTML="";

  removediv();

 }

 main_delay=setInterval("mainajax()",10);

}

////////////////////////主函数////////////////////////

function mainajax(){

 if(value_ed==obj_input.value)return false;

 if(value_unexit!="" && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML="";return false;}

 if(value_ed!=obj_input.value && ajax_run_ing==false){

  ajax_run=true;

  value_ed=obj_input.value;

  clearTimeout(ajax_delay);

  if(obj_input.value!=""){

   ajax_delay=setTimeout("getsearch();",time_delayajax);

  }else{

   hideajaxdiv();

   obj_div.innerHTML="";

   ajax_run=false;

   return false;  

  }

 }

}

////////////////////////获取搜索内容////////////////////////

function getsearch(){

 var temp_value=obj_input.value;

 if(ajax_xmlhttp==null){

  return false;

 }else if(ajax_xmlhttp.readyState!=0){

  ajax_xmlhttp.abort();

  ajax_run_ing=false;

 }

 ajax_xmlhttp.onreadystatechange=function(){

  if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}

  if(ajax_xmlhttp.readyState==4){

   obj_div.innerHTML="";

   if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){

    var contant=ajax_xmlhttp.responseText;

    if(contant!="" && ajax_run==true){

     div_word=temp_value;

     obj_div.innerHTML=resetcontant(contant);

     obj_div.style.display="block";

     removediv();removediv();

    }else{

     hideajaxdiv();

    }

    updown_run=true;

    ajax_run_ing=false;

    li_num=-1;

    if(contant=="")value_unexit=temp_value;

   }

  }

 }

 ajax_xmlhttp.open("post",url,true);

 ajax_xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');

 ajax_run_ing=true;

 ajax_xmlhttp.send("sift_value="+escape(temp_value)); //提交到后台的值*****************************************

}

////////////////////////内容重组///////////////////////

function resetcontant(Fun_contant){

 if(Fun_contant==null || Fun_contant=="")return "";

 var a=Fun_contant.substring(1,Fun_contant.length-1);

 if(Fun_contant==null || Fun_contant=="")return "";

 var b=a.split("''");

 var c;

 var d;

 d="<ul>";

 for(var i in b){

  c=b[i].split(",");

  //***************************************************************

  d=d+"<li onmouseover=\"overli("+i+");\" onmousedown=\"downli("+i+")\" onmouseup=\"upli("+i+",event)\" onmousemove=\"moveli();\"><span>"+c[1]+"</span>"+c[0]+"</li>";  //约 结果

  //***************************************************************

 }

 d=d+"<li onmousedown=\"input_focus=true;li_down=-1;\" onmouseup=\"li_down=-1\" onmousemove=\"moveli();\"><span><a class=\"shutajaxdiv\" onclick=\"hideajaxdiv();\">关闭</a></span></li>"

 d=d+"</ul>";

 return d;

}

////////////////////////键盘事件////////////////////////

function keydowndeal(Fun_event){

 var keyc=((window.event)?Fun_event.keyCode:Fun_event.which);

 if(keyc==13){hideajaxdiv();return false;}

 if(keyc==27){

  if(obj_div.style.display=="block" && li_num>-1)value_ed=obj_input.value=value_ing;

  hideajaxdiv();

  return false;

 }

 if(keyc==40 || keyc==38){

  if(div_word==obj_input.value && obj_div.style.display=="none" && obj_div.innerHTML!=""){

   obj_div.style.display="block";

   removediv();

   return false;

  }

  if(li_num==-1){

   if(div_word!=obj_input.value)return false;

  }else{

   if(div_word!=value_ing)return false;

  }

  if(updown_run==false || ajax_run_ing==true || obj_div.style.display=="none")return false;

  updown_delay=setTimeout("updownli("+keyc+")",time_delayupdown);

  updown_run=false;

 }

}

////////////////////////方向键移动li////////////////////////

function updownli(Fun_key){

 if(!obj_div){return false;}

 updown_run=true;

 if(li_num==-1){

  if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML="";li_num=-1;return false;}

 }else{

  if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML="";li_num=-1;return false;}

 }

 if(updown_run==false)return false;

 if(li_num==-1)value_ing=value_ed;

 if(Fun_key==40){

  if(li_num<obj_div.firstChild.childNodes.length-2){

   li_num++;

  }else{

   li_num=-1;

  }

 }

 if(Fun_key==38){

  if(li_num>=0){

   li_num--;

  }else{

   li_num=obj_div.firstChild.childNodes.length-2;

  }

 }

 if(li_num!=-1){

  value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;

 }else{

  value_ed=obj_input.value=value_ing;

 }

 setlistyle();

}

ajax.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001" %>

<%Response.CodePage="65001"%>

<%Response.Charset="utf-8" %>  

<!--#include file="Conn.asp"-->

<%  

dim Sift_value

dim Sql,Rs,I,Num

dim Contant

Contant=""

Num=10  

Sift_value=replace(unescape(request.form("sift_value")),"""","""""")  

Sql="select top "&Num&" ShopAddress,LicenseId from LC where ShopAddress like '%"&Sift_value&"%' order by LicenseId"

'Response.Write Sql

set Rs=server.CreateObject("adodb.recordset")

Rs.open Sql,O_con,1,1

if not (Rs.eof and Rs.bof) then

 for I=0 to Num-1

  Contant=Contant&"'"&rs(0)&","&rs(1)&"'"

  Rs.movenext

  if Rs.eof then exit for

 next

end if

response.Write(Contant)

Rs.close

set Rs=nothing

%>

asp: suggest ajax的更多相关文章

  1. asp.net ajax控件tab扩展，极品啊，秒杀其它插件

    说明:asp.net ajax控件tab要设置width和height,而且在线文本编辑器放能够放入tab中,也必须是asp.net的控件型在线文本,例如fckeditor,下面是我设置好的配置. & ...

  2. asp.net ajax与jquery的冲突问题解决

    在网上看到有网友说,用了updatepannel这个asp.net ajax异步更新面板后,javascript或者jquery代码不起作用,实际上,可以在updatepannel的触发器中进行设置解 ...

  3. asp.net Ajax和web services

    新建一个web服务 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  4. ASP.NET AJAX Control Toolkit

    https://ajaxcontroltoolkit.codeplex.com/ 警告 7 未能找到引用的组件“Antlr3.Runtime”. 警告 6 未能找到引用的组件“HtmlAgilityP ...

  5. 【转】【Asp.Net】了解使用 ASP.NET AJAX 进行局部页面更新

    简介Microsoft的 ASP.NET 技术提供了一个面向对象.事件驱动的编程模型,并将其与已编译代码的优势结合起来.但其服务器端的处理模型仍存在技术本身所固有的几点不足: 进行页面更新需要往返服务 ...

  6. ASP.NET Ajax核心对象

    本章学习目标 主要掌握AJAX的基本概念和实现机制,学习并创建XMLHttpRequest对象,使用XMLHttpRequestObject对象获取服务器端的数据 主要内容如下,请点击ASP.NET ...

  7. asp.net ajax 调用错误解决

    ajax调用aspx页面出现如下错误 前台源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  8. ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

    使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...

  9. 利用ASP.NET AJAX的Timer讓GridView每隔一段時間做到自動換頁的功能

    最近在討論區看到這個問題,小弟利用asp.net ajax的timer來實作這個功能 利用timer每隔一段時間,讓gridview自動跳頁並且更新gridview的內容 asp.net(c#) Gr ...

随机推荐

  1. CF702F T-Shirts FHQ Treap

    题意翻译 题目大意: 有n种T恤,每种有价格ci和品质qi.有m个人要买T恤,第i个人有vi元,每人每次都会买一件能买得起的qi最大的T恤.一个人只能买一种T恤一件,所有人之间都是独立的.问最后每个人 ...

  2. MacOs桌面自动被打乱的原因

    1 系统设置--Mission Control -- 自动根据最近使用情况排序的勾勾去掉

  3. 递归缓存技术，缓存机制Memoization

    先看一下代码: 再看一下执行时间: 可以看出第一个阶乘的执行时间是3ms,后面的由于缓存了之前的计算结果,所以直接返回结果. 原理就是缓存之前的计算,避免重复计算.关键在于建立缓存数组. 可以看一下执 ...

  4. 最近做了一个短网址服务 di81.com

    最近做了一个短网址服务:   di81.com 项目中有一处需求,需要把长网址缩为短网址,把结果通过短信.微信等渠道推送给客户.刚开始直接使用网上现成的开放服务,然后在某个周末突然手痒想自己动手实现一 ...

  5. webpack 打包css报错 Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

    是webpack4和extract-text-webpack-plugin的兼容性问题 执行命令:npm install extract-text-webpack-plugin@next --save ...

  6. [原创]c# 类中 Collection 字段初始化的特殊之处

    1.今天看一下StackExchange.Redis的源代码,里面有这样一段代码 public sealed class ConfigurationOptions : ICloneable { ... ...

  7. java - list 报java.lang.UnsupportedOperationException

    情景 现在有个数组,比如:String[]  array = new String[]{"1","2","3"}; 我们想要往这个数组中添加 ...

  8. Linux设备驱动开发基础--内核定时器

    1. Linux内核定时器是内核用来控制在未来某个时间点(基于jiffies)调度执行某个函数的一种机制,其实现位于 <Linux/timer.h> 和 kernel/timer.c 文件 ...

  9. PIE SDK自定义滤波

    1.算法功能简介 自定义滤波可以自由设置滤波模板,对数据进行处理,自定义滤波器的一般规则要求: ( 1) 滤波器的大小应该是奇数,这样它才有一个中心,例如 3x3, 5x5 或者 7x7.有中心了,也 ...

  10. 转 UTL_FILE Throws ORA-29284 Or ORA-29283 When Attempting To READ File

    APPLIES TO: PL/SQL - Version 9.2.0.8 and laterInformation in this document applies to any platform.* ...