以JSon来实现TextBox可选择可输入
2009-04-19 20:19
344 查看
SOURCE:/article/5328466.html
以JSon来实现TextBox可选择可输入
这里只是把主要的代码贴出来,不再进行过多的说明,重要的地方以注释的方式进行说明。
<div id="pubDiv" style="background-position: #9999FF; font-size:12px; display:none; z-index:0; overflow:auto; position:absolute; border:#EDEDED 0px solid;background:#EDEDED;"></div>
<script type="text/javascript" language="javascript">
// 注意下面的等号右面,不能是“<%=BuildJson() %>”,因为JSon整体不能是字符串,同时最后也不能加分号:“;”
var strJson = <%=BuildJson() %>
function ShowBdzDiv() {
var dept = document.getElementById("<%=ddlDeptEdit.ClientID %>").value;
// 构建要下拉选择的内容
var strHtml = "<table border=0px cellpadding=0 cellspacing=0 width=120px><tr>";
for (var key in strJson[dept]) {
strHtml += "<tr><td onclick=SetBdz()>" + key + "</td></tr>";
}
strHtml += "</table>";
var oBdz = document.getElementById("<%=txtBdz.ClientID %>");
var oDiv = document.getElementById("pubDiv");
oDiv.innerHTML = strHtml;
// 设置显示的位置,并显示
oDiv.style.top = "99px";
oDiv.style.left = "100px";
oDiv.style.display = "block";
}
// 当点击选择一个内容时
function SetBdz() {
var oBdz = document.getElementById("<%=txtBdz.ClientID %>");
// 把选择内容设置到TextBox上,并隐藏下拉选择项
oBdz.value = event.srcElement.innerText;
HiddenDiv();
}
// 隐藏下拉选择项
function HiddenDiv() {
var oDiv = document.getElementById("pubDiv");
oDiv.style.display = "none";
}
</script>
。。。
<!--这里只有一点要注意:设置AutoCompleteType="Disabled"-->
<asp:TextBox ID="txtBdz" AutoCompleteType="Disabled" onfocus="ShowBdzDiv()" runat="server"></asp:TextBox>
这里要说明的是,这里只实现了下拉选择项的点击选择,不能使用键盘操作。
本文转自我的163的博客。为了让自己的技术经验有更多的人分享,我会逐步把163的文章转到本博。
posted on 2009-04-18 10:03 常绍新 阅读(1307) 评论(8) 编辑 收藏 网摘
评论:
#1楼 2009-04-18 10:25 | skyjava [未注册用户]
沙发,顶
回复 引用
#2楼 2009-04-18 10:40 | billrobin
编译器错误消息: CS0103: 当前上下文中不存在名称“BuildJson”
源错误:
行 9: <script type="text/javascript" language="javascript">
行 10:
行 11: var strJson = <%=BuildJson() %>
行 12:
行 13: function ShowBdzDiv() {
回复 引用 查看
#3楼 2009-04-18 11:32 | Ryan Gene
页面上能同时存在两个这样的控件吗?看你的代码好像不行吧
回复 引用 查看
#4楼 2009-04-18 11:33 | ︶ㄣ木べ头
BuildJson(),肯定是后台生成Json的函数啊,自己写个咯,这个也问
回复 引用 查看
#5楼 2009-04-18 13:42 | billrobin
下次最好有demo下载,免得菜鸟读了还要自已写。
回复 引用 查看
#6楼 2009-04-18 15:14 | Allie
难道你读了 不写。。。 代码是写出来的 不是看出来的!
回复 引用 查看
#7楼 2009-04-18 18:22 | 林天问
@billrobin
完全的搞笑
回复 引用 查看
#8楼 2009-04-18 21:14 | daconglee
使用Jquery实现的autocomplete功能很强的,不用自己在造轮子了
回复 引用 查看
以JSon来实现TextBox可选择可输入
这里只是把主要的代码贴出来,不再进行过多的说明,重要的地方以注释的方式进行说明。
<div id="pubDiv" style="background-position: #9999FF; font-size:12px; display:none; z-index:0; overflow:auto; position:absolute; border:#EDEDED 0px solid;background:#EDEDED;"></div>
<script type="text/javascript" language="javascript">
// 注意下面的等号右面,不能是“<%=BuildJson() %>”,因为JSon整体不能是字符串,同时最后也不能加分号:“;”
var strJson = <%=BuildJson() %>
function ShowBdzDiv() {
var dept = document.getElementById("<%=ddlDeptEdit.ClientID %>").value;
// 构建要下拉选择的内容
var strHtml = "<table border=0px cellpadding=0 cellspacing=0 width=120px><tr>";
for (var key in strJson[dept]) {
strHtml += "<tr><td onclick=SetBdz()>" + key + "</td></tr>";
}
strHtml += "</table>";
var oBdz = document.getElementById("<%=txtBdz.ClientID %>");
var oDiv = document.getElementById("pubDiv");
oDiv.innerHTML = strHtml;
// 设置显示的位置,并显示
oDiv.style.top = "99px";
oDiv.style.left = "100px";
oDiv.style.display = "block";
}
// 当点击选择一个内容时
function SetBdz() {
var oBdz = document.getElementById("<%=txtBdz.ClientID %>");
// 把选择内容设置到TextBox上,并隐藏下拉选择项
oBdz.value = event.srcElement.innerText;
HiddenDiv();
}
// 隐藏下拉选择项
function HiddenDiv() {
var oDiv = document.getElementById("pubDiv");
oDiv.style.display = "none";
}
</script>
。。。
<!--这里只有一点要注意:设置AutoCompleteType="Disabled"-->
<asp:TextBox ID="txtBdz" AutoCompleteType="Disabled" onfocus="ShowBdzDiv()" runat="server"></asp:TextBox>
这里要说明的是,这里只实现了下拉选择项的点击选择,不能使用键盘操作。
本文转自我的163的博客。为了让自己的技术经验有更多的人分享,我会逐步把163的文章转到本博。
posted on 2009-04-18 10:03 常绍新 阅读(1307) 评论(8) 编辑 收藏 网摘
评论:
#1楼 2009-04-18 10:25 | skyjava [未注册用户]
沙发,顶
回复 引用
#2楼 2009-04-18 10:40 | billrobin
编译器错误消息: CS0103: 当前上下文中不存在名称“BuildJson”
源错误:
行 9: <script type="text/javascript" language="javascript">
行 10:
行 11: var strJson = <%=BuildJson() %>
行 12:
行 13: function ShowBdzDiv() {
回复 引用 查看
#3楼 2009-04-18 11:32 | Ryan Gene
页面上能同时存在两个这样的控件吗?看你的代码好像不行吧
回复 引用 查看
#4楼 2009-04-18 11:33 | ︶ㄣ木べ头
BuildJson(),肯定是后台生成Json的函数啊,自己写个咯,这个也问
回复 引用 查看
#5楼 2009-04-18 13:42 | billrobin
下次最好有demo下载,免得菜鸟读了还要自已写。
回复 引用 查看
#6楼 2009-04-18 15:14 | Allie
难道你读了 不写。。。 代码是写出来的 不是看出来的!
回复 引用 查看
#7楼 2009-04-18 18:22 | 林天问
@billrobin
完全的搞笑
回复 引用 查看
#8楼 2009-04-18 21:14 | daconglee
使用Jquery实现的autocomplete功能很强的,不用自己在造轮子了
回复 引用 查看
相关文章推荐
- 以JSon来实现TextBox可选择可输入
- JavaScript实现在textbox输入时自动去数据库匹配并找出类似值列出,选择后记得将值填入本textbox及下一个textbox
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- 自定义弹出窗口,实现可输入可过滤自动选择下拉框
- 【转】如何实现点击textbox显示monthCalendar 选择monthCalendar把值传给textbox
- 网页中文本框下拉选择输入与自动提示功能的实现
- (原创)用TextBox实现日期的输入
- DropDownList实现可输入可选择(两种版本可选)
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- UltraNumTextBox【实现所有数字输入的同时,可以控制当控件禁用时ForeColor】
- combobox和textbox中输入数据为非数字leave时的公用事件,只需要在控件的leave事件中选择本事件即可
- XmlHttp实现的输入拼音首字母选择的例子
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
- java Swing 自定义实现 下拉选择框,匹配输入提示
- 请用Shell编程来实现:当输入不同的选择时,执行不同的操作,如:输入start 开始启动应用程序myfiles,输入stop时,关闭myfiles,输入status时,查看myfiles进程,否则执
- 8266 执行./gen_misc.sh 通过管道实现默认输入参数,不用手动选择参数
- 怎样实现二级联动菜单即可选择又可输入???
- Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中(ZT)