求个ajax效果代码

娃哈哈真好喝01 2010-11-12 11:18:50
左边一个
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="TA1">产品品号</asp:ListItem>
<asp:ListItem Value="TA2">工单单号</asp:ListItem>
<asp:ListItem Value="TA3">机号</asp:ListItem>
<asp:ListItem Value="TA4">计划批号</asp:ListItem>
</asp:DropDownList>

右边一个输入框
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
现在希望：比如我下拉框选择机号，那么，我想在在文本框中查询E123456, 当我没有输完全的时候,比如输到：E123时文本框就出现下拉框似的一大堆选择项。

...全文
172 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
wdzr_826 2010-11-12
  • 打赏
  • 举报
 回复
是不是类似Google 的自动提示，给你个例子。
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
flyerwing 2010-11-12
  • 打赏
  • 举报
 回复
这个例子是JQUERY做的也许有用
七爷 2010-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 gac520 的回复:]
文本框的值改变事件 设置DDL的VALUE值。。。
[/Quote]
合肥的哥们顶个
浪子-无悔 2010-11-12
  • 打赏
  • 举报
 回复
文本框的值改变事件 设置DDL的VALUE值。。。
zhuxueliao 2010-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 shaoliang520xi 的回复:]
<!doctype html>
<html>
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.auto_hidden {
width:204px;border-top: 1px solid #333;
border-……
[/Quote]
不知道行不行。试试行的话说声
shaoliang520xi 2010-11-12
  • 打赏
  • 举报
 回复

<!doctype html>
<html>
<style>
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.auto_hidden {
width:204px;border-top: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
position:absolute;
display:none;
}
.auto_show {
width:204px;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #333;
border-right: 1px solid #333;
position:absolute;
z-index:9999; /* 设置对象的层叠顺序 */
display:block;
}
.auto_onmouseover{
color:#ffffff;
background-color:highlight;
width:100%;
}
.auto_onmouseout{
color:#000000;
width:100%;
background-color:#ffffff;
}
</style>
<script language="javascript">
<!--
/*
通用: 自动补全(仿百度搜索框)
作者：nj-troy
时间：2010-11-101
*/
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
function AutoComplete(obj,autoObj,arr){
this.obj=$(obj); //输入框
this.autoObj=$(autoObj);//DIV的根节点
this.value_arr=arr; //不要包含重复值
this.index=-1; //当前选中的DIV的索引
this.search_value=""; //保存当前搜索的字符
}
AutoComplete.prototype={
//初始化DIV的位置
init: function(){
this.autoObj.style.left = this.obj.offsetLeft + "px";
this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";
this.autoObj.style.width= this.obj.offsetWidth - 2 + "px";//减去边框的长度2px
},
//删除自动完成需要的所有DIV
deleteDIV: function(){
while(this.autoObj.hasChildNodes()){
this.autoObj.removeChild(this.autoObj.firstChild);
}
this.autoObj.className="auto_hidden";
},
//设置值
setValue: function(_this){
return function(){
_this.obj.value=this.seq;
_this.autoObj.className="auto_hidden";
}
},
//模拟鼠标移动至DIV时，DIV高亮
autoOnmouseover: function(_this,_div_index){
return function(){
_this.index=_div_index;
var length = _this.autoObj.children.length;
for(var j=0;j<length;j++){
if(j!=_this.index ){
_this.autoObj.childNodes[j].className='auto_onmouseout';
}else{
_this.autoObj.childNodes[j].className='auto_onmouseover';
}
}
}
},
//更改classname
changeClassname: function(length){
for(var i=0;i<length;i++){
if(i!=this.index ){
this.autoObj.childNodes[i].className='auto_onmouseout';
}else{
this.autoObj.childNodes[i].className='auto_onmouseover';
this.obj.value=this.autoObj.childNodes[i].seq;
}
}
}
,
//响应键盘
pressKey: function(event){
var length = this.autoObj.children.length;
//光标键"↓"
if(event.keyCode==40){
++this.index;
if(this.index>length){
this.index=0;
}else if(this.index==length){
this.obj.value=this.search_value;
}
this.changeClassname(length);
}
//光标键"↑"
else if(event.keyCode==38){
this.index--;
if(this.index<-1){
this.index=length - 1;
}else if(this.index==-1){
this.obj.value=this.search_value;
}
this.changeClassname(length);
}
//回车键
else if(event.keyCode==13){
this.autoObj.className="auto_hidden";
this.index=-1;
}else{
this.index=-1;
}
},
//程序入口
start: function(event){
if(event.keyCode!=13&&event.keyCode!=38&&event.keyCode!=40){
this.init();
this.deleteDIV();
this.search_value=this.obj.value;
var valueArr=this.value_arr;
valueArr.sort();
if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==""){ return; }//值为空，退出
try{ var reg = new RegExp("(" + this.obj.value + ")","i");}
catch (e){ return; }
var div_index=0;//记录创建的DIV的索引
for(var i=0;i<valueArr.length;i++){
if(reg.test(valueArr[i])){
var div = document.createElement("div");
div.className="auto_onmouseout";
div.seq=valueArr[i];
div.onclick=this.setValue(this);
div.onmouseover=this.autoOnmouseover(this,div_index);
div.innerHTML=valueArr[i].replace(reg,"<strong>$1</strong>");//搜索到的字符粗体显示
this.autoObj.appendChild(div);
this.autoObj.className="auto_show";
div_index++;
}
}
}
this.pressKey(event);
window.onresize=Bind(this,function(){this.init();});
}
}
//-->
</script>
<body>
<h1 align="center">自动完成函数(Autocomplete Function)</h1>
<div align="center"><input type="text" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)"></div>
<div class="auto_hidden" id="auto"><!--自动完成 DIV--></div>
<script>
var autoComplete=new AutoComplete('o','auto',['b0','b12','b22','b3','b4','b5','b6','b7','b8','b2','abd','ab','acd','accd','b1','cd','ccd','cbcv','cxf']);
</script>
</body>
</html>

细嗅蔷薇 2010-11-12
  • 打赏
  • 举报
 回复
听说过没做过 帮顶
蝶恋花雨 2010-11-12
  • 打赏
  • 举报
 回复
搜索一下HampWebControl 这个。CSDN里面就有。可以实现你要的 效果
http://www.cnblogs.com/wzh2010/archive/2010/11/06/1870502.html Web前端设计模式--构建Ajax智能搜索...
TONG_先生 2010-11-12
  • 打赏
  • 举报
 回复
不就是类似百度的自动补全效果嘛。可以利用AjaxControlToolkit.dll实现
porschev 2010-11-12
  • 打赏
  • 举报
 回复
你意思是要自动补全效果吗？
ch503922135 2010-11-12
  • 打赏
  • 举报
 回复
好东西，学习~~~
syb1045 2010-11-12
  • 打赏
  • 举报
 回复
http://www.cnblogs.com/zengxiangzhan/archive/2009/12/13/1623158.html

参考地址
不久才根据上面的做过一个GOOGLE提示输入框。 很容易看懂的
hch126163 2010-11-12
  • 打赏
  • 举报
 回复
<!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>
<title></title>
<style type ="text/css">
html,body{width:100%;height:100%}
ul{padding:0px;margin:0px;list-style:none;}
li{cursor:pointer;padding:0px 5px; line-height:25px;height:25px;}
</style>
</head>
<body>
<p>
<input type='text' id='txtInput' onkeyup='getSearchKeys()'/>
<div id='divShow' style="position:absolute; z-index:9999; width:200px; height:auto; display:none;border:1px solid #ddd">
<ul>
<li>aaa</li>
</ul>
</div>
</p>
</body>
<script type="text/javascript">
var keys=['ada','sdfsd','bbb','ada','dfhgfh','235s','dfew','ghjk','hjkghjk','fgjgfjf','fghjgfj','tyutyu','erterter','fghdfg','xvdfg','kjhu','qweasdas','xzce','werwre','zzczc','rtewtrew']; // 搜索值，可以用Ajax从数据库获取
var txtInput ;
var divShow ;
window.onload=function()
{
txtInput =document.getElementById("txtInput");
divShow = document.getElementById("divShow");
var p =getAbsPoint(txtInput);
divShow.style.left = p.x +'px';
divShow.style.top = p.y + txtInput.offsetHeight + 'px';
txtInput.onclick = divShow.onclick=function(e)
{
e = e||event;
var t = e.target||e.srcElement

if(t.tagName.toLowerCase()=='li')
{
txtInput.value = t.innerHTML;
divShow.style.display = "none";
return;
}
if(e && e.stopPropagation){
//W3C取消冒泡事件
e.stopPropagation();
}else{
//IE取消冒泡事件
window.event.cancelBubble = true;
}
};
document.body.onclick=function(e)
{
divShow.style.display = "none";
};
};
function getSearchKeys()
{
var s= txtInput.value;
if(s=='')
{
divShow.style.display = "none";
return;
}
var arr=['<ul>'];
for(var i=0;i<keys.length;i++)
{
if(keys[i].indexOf(s)>=0){
arr.push('<li>'+keys[i]+'</li>');
}
}

if(arr.length>1){
arr.push('</ul>');
divShow.innerHTML = arr.join('');
divShow.style.display = "block";
}else{
divShow.style.display = "none";
}
}

function getAbsPoint(e)
{
var x = e.offsetLeft;
var y = e.offsetTop;
while(e = e.offsetParent)
{
x += e.offsetLeft;
y += e.offsetTop;
}
return {"x": x, "y": y};
}
</script>
</html>

ajax实例代码及效果
本文将展示一个AJAX的实际应用代码，并探讨在服务器环境下运行的效果。欢迎各位读者提出宝贵意见。
ajax效果能,Ajax效果
本文介绍了不通过网页跳转实现Ajax效果的多种方法，包括利用http204属性、图片加载特性、CSS和JS以及iframe框架。通过这些技术，可以在用户注册时实时检查数据库中是否存在重复数据，提供更好的用户体验。同时，提到了Winform中的Ajax效果实现以及jQueryMobile的grid和Ajax等待显示效果。此外，还讨论了天气预报的Ajax实现和自定义Ajax请求添加loading效果的方法。
js 加载中 ajax,JS基于Ajax实现的网页Loading效果代码
本文展示了如何利用JavaScript和Ajax创建网页加载中（Loading）效果。在Ajax交互式网页设计中，点击按钮会显示Loading对话框，如果在加载未完成时尝试关闭页面，会出现确认提示，适用于安全性要求高的场景，如支付操作。提供了代码实例和在线演示链接。
java 实现loading效果_JS基于Ajax实现的网页Loading效果代码
本文介绍了一款基于JavaScript和Ajax实现的网页Loading效果代码。该效果常用于交互式网页设计中，在进行重要操作时显示Loading提示，确保用户体验的同时提高安全性。
html ajax等待效果,jQuery Ajax 异步加载显示等待效果代码分享
本文介绍了使用AJAX实现异步加载数据的效果，通过展示具体的HTML、CSS和JavaScript代码示例，展示了如何在不刷新页面的情况下加载数据并显示加载提示。
.NET社区

62,272

社区成员

668,969

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章