.NET中使用js实现百度搜索下拉提示效果[不是局部刷新，呜呜。。]

搞了个不是局部刷新的百度搜索框下拉提示效果，在被领导批了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();

}

哦了