提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

.NET使用js制作百度搜索下拉提示效果(不是局部刷新)实现思路

NetJS搜索百度思路 实现 使用 效果
2023-06-13 09:14:44 时间
搞了个不是局部刷新的百度搜索框下拉提示效果，在被领导批了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代码如下：
复制代码代码如下:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptlanguage="javascript"type="text/javascript">
functionabc(){
varinputV=document.getElementById("in").value;
//根据浏览器判断
if(/msie/i.test(navigator.userAgent))//ie浏览器
{
document.getElementById("lbltext").innerText=inputV;
}
else{//非ie浏览器，比如Firefox
document.getElementById("lbltext").innerHTML=inputV;//火狐等浏览器的赋值方式
}
}
functionInputT(){
varf=document.getElementById("inpContent");
varabc=document.getElementById("btnHelp");
document.getElementById("btnHelp").click();//触发Button的onclick事件
}
//为input添加的keydown事件
functionInputKeyDownFocus(){
//方向键的ASCII值：上：38，下：40
if(event.keyCode=="38"||event.keyCode=="40"){
document.getElementById("lst").focus();//使ListBox获得焦点
}
else{
document.getElementById("inpContent").focus();
}
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
输入内容：
<br/>
<inputrunat="server"id="inpContent"oninput="InputT()"onpropertychange="InputT()"
onkeyup="InputKeyDownFocus()"</br>/>
<asp:ListBoxrunat="server"ID="lst"OnSelectedIndexChanged="lst_SelectedIndexChanged"
AutoPostBack="true"</asp:ListBox>
<asp:Buttonrunat="server"ID="btnHelp"OnClick="btnHelp_Click"Text="隐藏按钮"/>
</div>
</form>
</body>
</html>

后台cs代码：
复制代码代码如下:

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
publicpartialclass_Default:System.Web.UI.Page
{
enumDirection
{
Up,Right,Down,Left
}
Directiondir;
protectedvoidPage_Load(objectsender,EventArgse)
{
btnHelp.Style.Add("display","none");
}
protectedvoidlstShow_SelectedIndexChanged(objectsender,EventArgse)
{
ListBoxlItem=(ListBox)sender;
stringlItemValue=lItem.SelectedItem.Text;
txtInput.Text=lItemValue;
}
///summary
///前台调用的方法
////summary
///paramname="sender"/param
///paramname="e"/param
protectedvoidbtnHelp_Click(objectsender,EventArgse)
{
stringinputStr=inpContent.Value.Trim();//文本框输入系统
ListobjectlistNew=newListobject();
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();//清除原有值
inti=1;
foreach(objectobjinlistNew)
{
//符合条件的数据
if(obj.ToString().Contains(inputStr))
{
lst.Style.Add("display","block");
lst.Items.Add(newListItem(obj.ToString(),""+i));
i++;
}
}
if(lst.Items.Count0)
{
lst.SelectedIndex=0;
}
inpContent.Focus();
}
///summary
///ListBox下拉框的值改变时
////summary
///paramname="sender"/param
///paramname="e"/param
protectedvoidlst_SelectedIndexChanged(objectsender,EventArgse)
{
ListBoxlItem=(ListBox)sender;
lst.Style.Add("display","block");
stringlItemValue=lItem.SelectedItem.Text;
inpContent.Value=lItemValue;
lst.Focus();
}

哦了

相关文章