<!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. easyui打开dialog后给弹出框内输入框赋值问题

    在写一个弹出页面的时候,里面有一些输入框,需要在弹出的时候从数据库取值并且赋值,刚开始在弹出的时候使用$(id).val(value),结果赋值失败,为空当时纠结了一会,然后突然想到在easyui打开 ...

  2. docker 安装 postgresql

    docker拉去镜像以及配置生成容器的步骤几乎和之前的nginx安装一样,直接写下面的命令了 1. docker pull postgres 2. docker run --name xf-postg ...

  3. springcloud微服务架构的思考

    在网上找到一张关于微服务体系架构的图 应用组件: 首先对于整个程序的入口应该是网关,zuul部分 这个组件在springcloud中的gateway服务之后,zuul可以进行网关分配,根据想应的路劲进 ...

  4. mysql 创建表时注意事项

    mysql  创建表时注意事项 mysql 想必大家都不会陌生吧  是我学习中第一个接触的的数据库 已学习就很快上手的   这是一个关系型数据库  不懂什么是关系型数据库 啊哈哈哈  现在知道啦  因 ...

  5. 洛谷 P1560 [USACO5.2]蜗牛的旅行Snail Trails

    题目链接 题解 一看题没什么思路.写了个暴力居然可过?! Code #include<bits/stdc++.h> #define LL long long #define RG regi ...

  6. LOJ6503. 「雅礼集训 2018 Day4」Magic（容斥原理＋NTT）

    题目链接 https://loj.ac/problem/6503 题解 题中要求本质不同的序列数量,不太好搞.我们考虑给相同颜色的牌加上编号,这样所有牌都不相同.那么如果我们求出了答案,只需要将答案除 ...

  7. POJ - 2528 奇怪的测试数据

    听说POJ内部测试数据有问题 我这份代码是WA的(UPD:第二份是AC代码),不过目前把discuss的数据试了一下没毛病 自己试了几组好像也没毛病? 感觉线段树部分的简单hash处理方法还是值得学习 ...

  8. PIE SDK矢量数据编辑事件的监听

    1.功能简介 通过IEditEvents接口,开发者可以监听到Editor对象的相关的事件,并且做出反应.包括Editor中开始编辑.结束编辑等操作,下面对矢量数据的编辑事件的监听功能进行介绍. 2. ...

  9. python练习七十：图片生成

    题目:使用python生成类似于下图的字母验证码图片 实现代码: from PIL import Image,ImageFont,ImageDraw,ImageFilter import random ...

  10. 2019.03.26 读书笔记 关于for与foreach

    for 是索引器,foreach是迭代器 foreach在movenext()中增加了对集合版本(一个整数,每次对集合修改都+1)的验证,另外反编译后的效果是使用了using(是try finally ...