Solved

Capturing keystroke in asp.net TextBox

Posted on 2014-01-28
4
626 Views
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 %>', '');
    };
</script>

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
TxtSearch.Focus();

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
0
Comment
Question by:forsters
  • 2
  • 2
4 Comments
 
LVL 4

Accepted Solution

by:
ItWorked earned 500 total points
Comment Utility
I'll rather appreciate of using such thing like as below...
http://jqueryui.com/autocomplete/

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 ;)
0
 

Author Comment

by:forsters
Comment Utility
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
0
 
LVL 4

Assisted Solution

by:ItWorked
ItWorked earned 500 total points
Comment Utility
It's seems to be what I understand.
TxtSearch.Focus()

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.
0
 

Author Comment

by:forsters
Comment Utility
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
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now