页面
<input name="key" id="key" type="text" class="input1" size="13" onkeyup="keyupdeal(event);" onkeydown="keydowndeal(event);" onclick="keyupdeal(event);">
后台页面
<%
'-----------------------------------------------------------------
dim keyword
keyword=trim(request("key"))
'response.Write(request("key")+"add")
'接收ajax发送的参数
if keyword="" then response.End()
'------------------------------------------------------------------
set rs=server.CreateObject("adodb.recordset")
sql="select * from Hotel where h_name like '%"&keyword&"%' order by id desc"
rs.open sql,conn,1,1
'------------------------------------------------------------------
'--------如果没有找到的话,返回0
'--------如果找到的话,返回所有匹配的项目
if not (rs.eof and rs.bof) then
response.Write("<ul>")
for i=0 to 9
if rs.eof then exit for
response.Write("<li value="""&i&""" onclick=""form_submit()"" onmouseover=""mo(this.value)"">"&rs("h_name")&"<span>"&rs("h_zone")&"</span></li>")
rs.movenext
next
response.Write("</ul>")
end if
rs.close
set rs=nothing
%>
js页面
var j=-1;
var temp_str;
var $=function(node){
return document.getElementById(node);
}
var $$=function(node){
return document.getElementsByTagName(node);
}
function ajax_keyword(){
var xmlhttp;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4){
if (xmlhttp.status==200){
var data=xmlhttp.responseText;
$("suggest").innerHTML=data;
j=-1;
}
}
}
xmlhttp.open("post", "ajax_result.asp", true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send("key="+escape($("key").value));
}
function keyupdeal(e){
var keyc;
if(window.event){
keyc=e.keyCode;
}
else if(e.which){
keyc=e.which;
}
if(keyc!=40 && keyc!=38){
ajax_keyword();
temp_str=$("key").value;
}
}
function set_style(num){
for(var i=0;i<$$("li").length;i++){
var li_node=$$("li")[i];
li_node.className="";
}
if(j>=0 && j<$$("li").length){
var i_node=$$("li")[j];
$$("li")[j].className="select";
}
}
function mo(nodevalue){
j=nodevalue;
set_style(j);
}
function form_submit(){
if(j>=0 && j<$$("li").length){
$$("input")[0].value=$$("li")[j].childNodes[0].nodeValue;
}
//document.search.submit();
}
function hide_suggest(){
var nodes=document.body.childNodes
for(var i=0;i<nodes.length;i++){
if(nodes[i]!=$("key")){
$("suggest").innerHTML="";
}
}
}
function keydowndeal(e){
var keyc;
if(window.event){
keyc=e.keyCode;
}
else if(e.which){
keyc=e.which;
}
if(keyc==40 || keyc==38){
if(keyc==40){
if(j<$$("li").length){
j++;
if(j>=$$("li").length){
j=-1;
}
}
if(j>=$$("li").length){
j=-1;
}
}
if(keyc==38){
if(j>=0){
j--;
if(j<=-1){
j=$$("li").length;
}
}
else{
j=$$("li").length-1;
}
}
set_style(j);
if(j>=0 && j<$$("li").length){
$("key").value=$$("li")[j].childNodes[0].nodeValue;
}
else{
$("key").value=temp_str;
}
}
}
css
#key{
display:inline;
float:left;
}/**/
#sug{
margin-right:200px;
margin-top:-3px;
border:1px solid #000;
list-style:none;
width:222px;
padding:0px;
}
.select{
background:#36C;
color:#FFF;
}
.select span{
color:#FFF;
}
#sug li{
line-height:16px;
font-size:12px;
color:#CC3366;
padding:2px;
}
#sug span{
float:right;
font-size:12px;
color:#008000;
margin-top:-18px;
}/**/
#suggest{
margin:0 auto;
float:left;
/*z-index:20;*/
position:absolute;}
分享到:
相关推荐
在搜索框(textbox)内输入关键词,实现智能提示功能 感觉比较实用 就拿来用了用 并与大家分享,感兴趣的 可以来下载
asp.net实现用户一登陆实现欢迎提示的托盘,很好用的。。。
当鼠标点击时提示文字消失,离开后又出现,提示文字时灰色字体,输入文本时时黑色字体
又一个Ajax+ASP输入框搜索提示,带Access数据库,本程序亮点是它可以根据你输入的关键词判断数据库是否已经存在,若不存在就将此关键词写入数据库,这样实际上是由用户帮你充实的资料库;本程序没有用到AJAX框架,...
ASP实现搜索框仿GOOGLE智能提示,随输入的信息智能显示相关数据
通过js实现的基于ASP.NET实现的输入验证消息面板,采用js实现服务器端控件输入验证错误信息提示动态面板。
Ajax文本框输入提示,学习java 简单参考。基于ajax一个Ajax文本框输入提示的例子,用asp实现: 前台文件
(2)在输入搜索关键字的过程中,每输入一个字符后,显示输入提示框。在输入一个字符后如果提示框还没有显示出来,有圈圈作为提示。只有提示框完全显示出来之后,才允许搜索 (3)搜索结果列表实现分页显示
这是我在网上搜集的已经测试...实例实现了,Asp.net中应用Jquery FlexBox实现可输入,可选择的下拉框。而且可以自动从数据库中匹配数据,实现自能提示效果。 源码下载地址:http://bbs.wolefa.com/showtopic-134.html
第一篇 ASP.NET AJAX概述 第1章 初识ASP.NET AJAX 1.1 ASP.NET AJAX概述 1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP...
第一篇 ASP.NET AJAX概述 第1章 初识ASP.NET AJAX 1.1 ASP.NET AJAX概述 1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP...
本系统采用B/S模式,采用现在使用广泛的ASP语言和对数据文件安全保护性极好的SQL Server2000设计开发出的一个实现在线考试的动态网站—基于Web的考试管理系统,也就是在线考试系统。该系统基本上具备一个网上数据...
用户首次登录网站给出用户名和密码的输入提示,否则给出登录过的用户名 实现用户名和密码的非空、数据验证 通过验证后将用户重定向到Defalut.aspx页面,并传递用户名参数 在Default.aspx页面显示“欢迎,***...
为了更好的用户体验,不论是桌面软件还是网站,在搜索查询的输入中都会加入提示功能,就像百度搜索一样!今天笔者就ASP.NET编程介绍一下如何利用Ajax来实现搜索信息提示功能。
C#课程设计-C#大作业基于ASP.NET+SQL实现的学生信息管理系统源码 ...在添加信息时对用户输入的数据通过正则表达式进行检测是否合法,如果合法就可以成功添加,否则失败,并在页面提示用户数据非法。
VOD视频点播管理系统,使用的数据库名称为“vod”,用户可以直接... 提示:由于本系统比较庞大,主要目的是给读者提供一些设计思路。另外数据库中没有数据,需要自己输入。 管理员用户名:admin 密码:admin
第一篇 ASP.NET AJAX概述 第1章 初识ASP.NET AJAX 1.1 ASP.NET AJAX概述 1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP...
2、验证控件十分方便,可以帮助我们很好解决提示用户输入的作用,达到一种很好的用户体验效果。 3、本程序,采用了非空验证(RequireValidator)、范围验证(RangeValidator)、手机号码以及电子邮件的验证...
第一篇 ASP.NET AJAX概述 第1章 初识ASP.NET AJAX 1.1 ASP.NET AJAX概述 1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP...
第一篇 ASP.NET AJAX概述 第1章 初识ASP.NET AJAX 1.1 ASP.NET AJAX概述 1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP...