I made a pull-down prompt for Baidu search box that was not partially refreshed. After being approved by the leaders for n times and asked for n times, I got it. I really feel like I am a little confused, it's too cool and too lazy. Record it to avoid forgetting it.
General idea: put an input tag on the foreground, and then call the background code to query the Qualified Data bound to ListBox when the value input in the tag changes.
Specific implementation ideas: One input. When the input value changes, the background code is called. But how to call it? This is a problem. Place a hidden server control button in the input to hide the control. When the value in the input changes, call js, trigger The onclick event of the button in js, and put the code of the specific operation data into the onclick event. However, visable is used instead of btnHelp. style. add ("display", "none"); [ps: btnHelp button ID, put in Page_Load]. If visable is used, this object cannot be obtained in js. Data is available. However, how can I use the up/down key to display the content in ListBox to Input? Obviously, ListBox itself supports up/down keys and only needs to call the SelectedIndexChanged method, then assign a value to Input. However, how can we ensure that the cursor is obedient, and you press the up and down key to automatically jump to The ListBox? Well, write Javascript. When the input value is complete, that is: write in onkeyup event.
Code:
The aspx code is as follows:
Copy codeThe Code is as follows:
<% @ 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;
// Judge based on the browser
If (/msie/I. test (navigator. userAgent) // IE browser
{
Document. getElementById ("lbltext"). innerText = inputV;
}
Else {// non-IE browser, such as Firefox
Document. getElementById ("lbltext"). innerHTML = inputV; // The Assignment Method of Firefox and other browsers
}
}
Function InputT (){
Var f = document. getElementById ("inpContent ");
Var abc = document. getElementById ("btnHelp ");
Document. getElementById ("btnHelp"). click (); // trigger the onclick event of the Button
}
// Keydown event added for input
Function InputKeyDownFocus (){
// ASCII value of the direction key: Up: 38, down: 40
If (event. keyCode = "38" | event. keyCode = "40 "){
Document. getElementById ("lst"). focus (); // get the focus of ListBox
}
Else {
Document. getElementById ("inpContent"). focus ();
}
}
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
Input content:
<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 = "Hide Button"/>
</Div>
</Form>
</Body>
</Html>
Backend cs code:
Copy codeThe Code is as follows:
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
/// Frontend call Method
/// Summary
/// Param name = "sender"/param
/// Param name = "e"/param
Protected void btnHelp_Click (object sender, EventArgs e)
{
String inputStr = inpContent. Value. Trim (); // text box input system
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 (); // Clear the original value
Int I = 1;
Foreach (object obj in listNew)
{
// Qualified Data
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
/// When the value of the ListBox drop-down box is changed
/// 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 ();
}
Oh
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
