<!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. ORA-03113 ： end-of-file on communication channel

    现象一: 数据库startup时,出现数据库无法正常mount,并报ORA-03113错误. SQL> startup ORACLE instance started. Total System ...

  2. 八大排序算法的python实现（二）希尔排序

    代码: #coding:utf-8 #author:徐卜灵 # 希尔排序的实质就是分组插入排序,该方法又称缩小增量排序,因DL．Shell于1959年提出而得名. # 希尔排序,也称递减增量排序算法, ...

  3. C# 使用List<T> 内存溢出

    class Program    {        static void Main(string[] args)        {            var all = new List< ...

  4. DP设状态 : 状压与线

    [NOIP2017]宝藏(状压) [AHOI2009]中国象棋(状压) [BZOJ1814] URAL1519 Formula 1(插头\(DP\)模板) 新链接 : Luogu5056 , dark ...

  5. Windows 安装Angular CLI

    1.安装nvm npm cnpm nrm(onenote笔记上有记录) 参考:https://blog.csdn.net/tyro_java/article/details/51232458 提示:如 ...

  6. Luogu P2572 [SCOI2010]序列操作 线段树。。

    咕咕了...于是借鉴了小粉兔的做法ORZ... 其实就是维护最大子段和的线段树,但上面又多了一些操作....QWQ 维护8个信息:1/0的个数(sum),左/右边起1/0的最长长度(ls,rs),整段 ...

  7. [转] #!/bin/sh & #!/bin/bash区别

    [From] http://blog.51cto.com/meiling/1826201 在shell脚本的开头往往有一句话来定义使用哪种sh解释器来解释脚本.目前研发送测的shell脚本中主要有以下 ...

  8. Hadoop 使用基础

    [摘录自] https://www.yiibai.com/hadoop/hadoop_hdfs_operations.html#article-start 一.HDFS 使用基础 格式化配置HDFS文 ...

  9. [转] docker基础知识之挂载本地目录

    [From] https://blog.csdn.net/huludan/article/details/52641090 https://my.oschina.net/piorcn/blog/324 ...

  10. NodeJS使用SSL证书

    [From] https://segmentfault.com/q/1010000004705326 var options = { key: fs.readFileSync('../ssl/priv ...