Solved

Capturing keystroke in asp.net TextBox

Posted on 2014-01-28
4
660 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
[X]
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
4 Comments
 
LVL 4

Accepted Solution

by:
ItWorked earned 500 total points
ID: 39814946
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
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
0
 
LVL 4

Assisted Solution

by:ItWorked
ItWorked earned 500 total points
ID: 39816870
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
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
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
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…

729 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