asp: suggest ajax
<!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的更多相关文章
- asp.net ajax控件tab扩展，极品啊，秒杀其它插件
说明:asp.net ajax控件tab要设置width和height,而且在线文本编辑器放能够放入tab中,也必须是asp.net的控件型在线文本,例如fckeditor,下面是我设置好的配置. & ...
- asp.net ajax与jquery的冲突问题解决
在网上看到有网友说,用了updatepannel这个asp.net ajax异步更新面板后,javascript或者jquery代码不起作用,实际上,可以在updatepannel的触发器中进行设置解 ...
- asp.net Ajax和web services
新建一个web服务 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...
- ASP.NET AJAX Control Toolkit
https://ajaxcontroltoolkit.codeplex.com/ 警告 7 未能找到引用的组件“Antlr3.Runtime”. 警告 6 未能找到引用的组件“HtmlAgilityP ...
- 【转】【Asp.Net】了解使用 ASP.NET AJAX 进行局部页面更新
简介Microsoft的 ASP.NET 技术提供了一个面向对象.事件驱动的编程模型,并将其与已编译代码的优势结合起来.但其服务器端的处理模型仍存在技术本身所固有的几点不足: 进行页面更新需要往返服务 ...
- ASP.NET Ajax核心对象
本章学习目标 主要掌握AJAX的基本概念和实现机制,学习并创建XMLHttpRequest对象,使用XMLHttpRequestObject对象获取服务器端的数据 主要内容如下,请点击ASP.NET ...
- asp.net ajax 调用错误解决
ajax调用aspx页面出现如下错误 前台源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- ASP.NET MVC中使用ASP.NET AJAX异步访问WebService
使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...
- 利用ASP.NET AJAX的Timer讓GridView每隔一段時間做到自動換頁的功能
最近在討論區看到這個問題,小弟利用asp.net ajax的timer來實作這個功能 利用timer每隔一段時間,讓gridview自動跳頁並且更新gridview的內容 asp.net(c#) Gr ...
随机推荐
- linux+python+robot+jenkins
1.安装python 安装devtoolset # yum groupinstall “Development tools” 安装编译Python需要的包 # yum -y install zlib- ...
- C语言数据结构-链式队列的实现-初始化、销毁、清空、长度、队列头元素、插入、删除、显示操作
1.数据结构-链式队列的实现-C语言 typedef struct QNode { int data; struct QNode *next; }QNode,*QueuePtr; typedef st ...
- Anya and Cubes 搜索+map映射
Anya loves to fold and stick. Today she decided to do just that. Anya has n cubes lying in a line an ...
- CBoard 汉化以及元数据存储配置
汉化配置如图位置: 元数据存储配置为Mysql数据库的位置 版权声明:本文为博主原创文章,需要转载请注明出处. [置顶]Cboard 系列随笔
- bootdo开源项目修改代码后页面无效
修改了JS文件,重启服务后,发现页面没有刷新出效果. 清空缓存一般就可以解决此问题.
- 天梯赛easy题
2 #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> ...
- dapper源码(.net 4.0)
http://blog.csdn.net/ahshow/article/details/42773929
- [转] Spring Boot特性
[From] http://blog.javachen.com/2015/03/13/some-spring-boot-features.html 1. SpringApplication Sprin ...
- (转)数位dp
原博客 https://blog.csdn.net/wust_zzwh/article/details/52100392 建议原博客看到hdu 不要62,然后看我分割线后两道题,然后再回来看原博.-- ...
- 2019.03.28 读书笔记 关于lock
多线程就离不开lock,lock的本质是一个语法糖,采用了监视器Monitor. lock的参数,错误方式有很多种,只需要记住一种:private static readonly object loc ...