无为清净楼资源网 Design By www.qnjia.com
搞了个不是局部刷新的百度搜索框下拉提示效果，在被领导批了n次后，问了n次后，弄出来了，真心感觉我这个小脑壳，太不灵光了，太懒了。记录下来，以免忘记。
大致思路：前台放一个input标签，然后当该标签内的值输入有变化的时候，调用后台代码查询 符合条件的数据绑定ListBox。
具体实现思路：一个input，当输入值变化时，调用后台代码。但是怎么调用呢，这个是个问题了，在该input下放一个隐藏的服务器控件button，隐藏该控件，当input里值变化时，调用js，在js里触发该按钮的onclick事件，把具体的操作数据的代码就可以放到onclick事件里了。但是这里的隐藏不是使用visable来隐藏的，而是使用：btnHelp.Style.Add("display", "none");[ps：btnHelp按钮ID，放在Page_Load里]，如果使用visable，则会造成在js里获得不到该对象。 数据是有了，可是，怎样使用上下键让ListBox里的内容显示到Input上呢，很明显，ListBox本身支持上下键的，只需要调用SelectedIndexChanged方法，然后为Input赋值即可。可是，怎么样保证光标就乖乖的听话，你按上下键它就自动跳到ListBox里呢，好吧，写js吧，当input里的值输入完成，即：onkeyup事件里写即可。
具体代码：
aspx代码如下：
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function abc() {
var inputV = document.getElementById("in").value;
//根据浏览器判断
if (/msie/i.test(navigator.userAgent)) //ie浏览器
{
document.getElementById("lbltext").innerText = inputV;
}
else {//非ie浏览器，比如Firefox
document.getElementById("lbltext").innerHTML = inputV; //火狐等浏览器的赋值方式
}
}
function InputT() {
var f = document.getElementById("inpContent");
var abc = document.getElementById("btnHelp");
document.getElementById("btnHelp").click(); //触发Button的onclick事件
}
//为input 添加的keydown事件
function InputKeyDownFocus() {
//方向键的ASCII值：上：38，下：40
if (event.keyCode == "38" || event.keyCode == "40") {
document.getElementById("lst").focus(); //使ListBox获得焦点
}
else {
document.getElementById("inpContent").focus();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
输入内容：
<br />
<input runat="server" id="inpContent" oninput="InputT()" onpropertychange="InputT()"
onkeyup="InputKeyDownFocus()" </br> />
<asp:ListBox runat="server" ID="lst" OnSelectedIndexChanged="lst_SelectedIndexChanged"
AutoPostBack="true"</asp:ListBox>
<asp:Button runat="server" ID="btnHelp" OnClick="btnHelp_Click" Text="隐藏按钮" />
</div>
</form>
</body>
</html>
后台cs代码：
复制代码 代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
enum Direction
{
Up, Right, Down, Left
}
Direction dir;
protected void Page_Load(object sender, EventArgs e)
{
btnHelp.Style.Add("display", "none");
}
protected void lstShow_SelectedIndexChanged(object sender, EventArgs e)
{
ListBox lItem = (ListBox)sender;
string lItemValue = lItem.SelectedItem.Text;
txtInput.Text = lItemValue;
}
/// summary
/// 前台调用的方法
/// /summary
/// param name="sender"/param
/// param name="e"/param
protected void btnHelp_Click(object sender, EventArgs e)
{
string inputStr = inpContent.Value.Trim(); //文本框输入系统
Listobject listNew = new Listobject();
listNew.Add("abc");
listNew.Add("abcde");
listNew.Add("bcd");
listNew.Add("bcdef");
listNew.Add("bcdagb");
listNew.Add("bbccaa");
listNew.Add("aabbdd");
listNew.Add("ccaabbdd");
lst.Items.Clear(); //清除原有值
int i = 1;
foreach (object obj in listNew)
{
//符合条件的数据
if (obj.ToString().Contains(inputStr))
{
lst.Style.Add("display", "block");
lst.Items.Add(new ListItem(obj.ToString(), "" + i));
i++;
}
}
if (lst.Items.Count 0)
{
lst.SelectedIndex = 0;
}
inpContent.Focus();
}
/// summary
/// ListBox下拉框的值改变时
/// /summary
/// param name="sender"/param
/// param name="e"/param
protected void lst_SelectedIndexChanged(object sender, EventArgs e)
{
ListBox lItem = (ListBox)sender;
lst.Style.Add("display", "block");
string lItemValue = lItem.SelectedItem.Text;
inpContent.Value = lItemValue;
lst.Focus();
}
哦了
大致思路：前台放一个input标签，然后当该标签内的值输入有变化的时候，调用后台代码查询 符合条件的数据绑定ListBox。
具体实现思路：一个input，当输入值变化时，调用后台代码。但是怎么调用呢，这个是个问题了，在该input下放一个隐藏的服务器控件button，隐藏该控件，当input里值变化时，调用js，在js里触发该按钮的onclick事件，把具体的操作数据的代码就可以放到onclick事件里了。但是这里的隐藏不是使用visable来隐藏的，而是使用：btnHelp.Style.Add("display", "none");[ps：btnHelp按钮ID，放在Page_Load里]，如果使用visable，则会造成在js里获得不到该对象。 数据是有了，可是，怎样使用上下键让ListBox里的内容显示到Input上呢，很明显，ListBox本身支持上下键的，只需要调用SelectedIndexChanged方法，然后为Input赋值即可。可是，怎么样保证光标就乖乖的听话，你按上下键它就自动跳到ListBox里呢，好吧，写js吧，当input里的值输入完成，即：onkeyup事件里写即可。
具体代码：
aspx代码如下：
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function abc() {
var inputV = document.getElementById("in").value;
//根据浏览器判断
if (/msie/i.test(navigator.userAgent)) //ie浏览器
{
document.getElementById("lbltext").innerText = inputV;
}
else {//非ie浏览器，比如Firefox
document.getElementById("lbltext").innerHTML = inputV; //火狐等浏览器的赋值方式
}
}
function InputT() {
var f = document.getElementById("inpContent");
var abc = document.getElementById("btnHelp");
document.getElementById("btnHelp").click(); //触发Button的onclick事件
}
//为input 添加的keydown事件
function InputKeyDownFocus() {
//方向键的ASCII值：上：38，下：40
if (event.keyCode == "38" || event.keyCode == "40") {
document.getElementById("lst").focus(); //使ListBox获得焦点
}
else {
document.getElementById("inpContent").focus();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
输入内容：
<br />
<input runat="server" id="inpContent" oninput="InputT()" onpropertychange="InputT()"
onkeyup="InputKeyDownFocus()" </br> />
<asp:ListBox runat="server" ID="lst" OnSelectedIndexChanged="lst_SelectedIndexChanged"
AutoPostBack="true"</asp:ListBox>
<asp:Button runat="server" ID="btnHelp" OnClick="btnHelp_Click" Text="隐藏按钮" />
</div>
</form>
</body>
</html>
后台cs代码：
复制代码 代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
enum Direction
{
Up, Right, Down, Left
}
Direction dir;
protected void Page_Load(object sender, EventArgs e)
{
btnHelp.Style.Add("display", "none");
}
protected void lstShow_SelectedIndexChanged(object sender, EventArgs e)
{
ListBox lItem = (ListBox)sender;
string lItemValue = lItem.SelectedItem.Text;
txtInput.Text = lItemValue;
}
/// summary
/// 前台调用的方法
/// /summary
/// param name="sender"/param
/// param name="e"/param
protected void btnHelp_Click(object sender, EventArgs e)
{
string inputStr = inpContent.Value.Trim(); //文本框输入系统
Listobject listNew = new Listobject();
listNew.Add("abc");
listNew.Add("abcde");
listNew.Add("bcd");
listNew.Add("bcdef");
listNew.Add("bcdagb");
listNew.Add("bbccaa");
listNew.Add("aabbdd");
listNew.Add("ccaabbdd");
lst.Items.Clear(); //清除原有值
int i = 1;
foreach (object obj in listNew)
{
//符合条件的数据
if (obj.ToString().Contains(inputStr))
{
lst.Style.Add("display", "block");
lst.Items.Add(new ListItem(obj.ToString(), "" + i));
i++;
}
}
if (lst.Items.Count 0)
{
lst.SelectedIndex = 0;
}
inpContent.Focus();
}
/// summary
/// ListBox下拉框的值改变时
/// /summary
/// param name="sender"/param
/// param name="e"/param
protected void lst_SelectedIndexChanged(object sender, EventArgs e)
{
ListBox lItem = (ListBox)sender;
lst.Style.Add("display", "block");
string lItemValue = lItem.SelectedItem.Text;
inpContent.Value = lItemValue;
lst.Focus();
}
哦了
标签：
下拉提示,局部刷新
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月17日
2024年11月17日
- 中国武警男声合唱团《辉煌之声1天路》[DTS-WAV分轨]
- 紫薇《旧曲新韵》[320K/MP3][175.29MB]
- 紫薇《旧曲新韵》[FLAC/分轨][550.18MB]
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】