Capturing keystroke in asp.net TextBox

Posted on 2014-01-28
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2

Accepted Solution

ItWorked earned 2000 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 impossible...catch22...no?

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 2000 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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

777 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