Capturing keystroke in TextBox

Posted on 2014-01-28
Last Modified: 2014-01-29
Hi Experts,

I have a datalist displayed in an update panel which I would like to respond to each keystroke made in a textbox. The textbox is acting as a search box.

I realise that I can use an OnTextChanged event but this doesn't postback until the focus leaves the textbox. In most cases 2 to 3 characters will be sufficient to get the user what they want, but if I can't show this in real-time on their screen so that they can see their search narrowing in, they will continue to type out a full word on every search.
So if possible I'd like to postback on each keystoke so that the datalist is refining the results in the most dynamic way possible...

I have been experimenting with a tiny piece of Javascript that I found online but I need a little expert help to fine tune. This is the code I have:
<script type="text/javascript">
       function RefreshUpdatePanel() {
           __doPostBack('<%= TxtSearch.ClientID %>', '');

Open in new window

<asp:TextBox ID="TxtSearch" AutoPostBack="true" onkeyup="RefreshUpdatePanel();" OnTextChanged="TxtSearch_TextChanged" runat="server"></asp:TextBox>

Open in new window

I also have focus set in the page_load event

Open in new window

which I would like to preserve if I can - currently this is problematic when combined with keystroke postback as it resets the cursor to the left of the textbox - so if I have typed 'a' the page posts back the cursor moves left I type my next letter lets say 'b' but what I end up with is 'ba' not 'ab' as intended. So I think part of my problem is I am posting back the whole page whereas I only want to post back my update panel.
I'm not very experienced in AJAX Javascript so much fumbling around, would appreciate some guidance from the pros.

Many thanks in advance
Question by:forsters
  • 2
  • 2

Accepted Solution

ItWorked earned 500 total points
ID: 39814946
I'll rather appreciate of using such thing like as below...

Open in new window

The problem with Ajax toolkit is when update panel returns HTML back from server, It'll replace the existing which causes focus lost.

Though there's way to handle such thing but there's again question of browser compablity( IE by default handles this where in chrome and firefox one needs to code broeser specific script to handle focus for update panel.)

You can have a button(which is not visible and onclick of that button you can post your search text to server. in response to that server will return the HTML/ more appropriate would be JSON data).
Which you can use for obtaining the required functionality.

Let know if more help required ;)

Author Comment

ID: 39814995
Hi ItWorked,

Thanks for your advice, I think its the Javascript I am using that's posting back the textbox in order to register the keystrokes...the box sits outside of the update panel so should be unaffected by that updating...but because I have TxtSearch.Focus() in the page-Load each postback resets the focus - if I change that and nest it inside if (!IsPostBack) then after each keystroke I lose the focus - so I suppose what I'm trying to do is postback from the textbox with out interrupting the flow of data-entry to that textbox - its starting to sound

I like the jquery autocomplete function -I will look at that, it isn't quite what I was after but it would be a close second. Do you by chance know if/how I can bind that to a sql generated list -rather than hard-code the array?
This will be IE only so I'm not worried about browser compatibility in this case.

Many thanks for your help

Assisted Solution

ItWorked earned 500 total points
ID: 39816870
It's seems to be what I understand.

Open in new window

only brings focus.(It's not intelligent that it'll bring focus to your last entered character.

Yes, It's possible to have a Jquery Auto complete  from SQL Server.
For that you can search for
1) How to create [WebMethod] in Webpage(Not WebService).
2) How to consume same from jQuery
3) This is what you need I guess

Let us know if you need more information.

Author Comment

ID: 39817252
Hmm yes I think I was asking the impossible :(

Ok well thanks for the JQuery tips I will have a look at that instead

Many thanks

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question