Supertext Home
Chief of the System Blog

See search results as you type – An ASP.NET Ajax Control

June 19th, 2007 by

Search as you type

Highrise and other new Ajax enabled tools have this feature that when you type in a search query, it automatically updates the search results below. It’s almost like a Auto-Complete Box, but with full results on the page instead of a drop down list below the control. Unfortunately I didn’t find anything like this in the Microsoft ASP.NET Ajax Toolkit.

So there was only one solution, build it myself.

Here is the result:

Live Demo
VS 2008 Solution with Source Code
There is some other stuff in there too, but the demo for this project is under /RemyExamples/DelayedSubmitExample and the source code for the Control under /DelayedSubmit.

It’s my first Ajax Control, so I’m sure there is room for improvements. I’ve tested it in IE7, FF and Safari. Seems to work fine in all of them.

I used the Membership Editor Example from Peter Keller and TextChangedBehavior.js from Garbin as my inspiration and resource, but started with a VS ASP.NET Ajax Control Project to get the framework up and running.

The only thing the code really does is start a time on the keyup event, stop the time on keydown and after the time fires, it executes the onchange method of the associated Textbox. This way we get a delayed postback after the user stopped typing and not tons of postbacks when he’s still writing something.

_onkeyup : function(ev) {
    var k = ev.keyCode ? ev.keyCode : 
                ev.rawEvent.keyCode;        
    if (k != Sys.UI.Key.Tab) {
        this._timer.set_enabled(true);
    }        
},


_onkeydown : function(ev) {
    this._timer.set_enabled(false);
},


_onTimerTick : function(sender, eventArgs) {
    this._timer.set_enabled(false);
    
    if(this._text != this.get_element().value) {
        this._text = this.get_element().value;
        
        this.get_element().onchange(); 
    }
},

Everthing else is just setup and teardown code. In the ASP page, one can just add this Control like any other Extender and add an OnChange handler to the textbox.

<cc1:DelayedSubmitExtender ID="DelayedSubmit" 
    runat="server" Timeout="1000" 
    TargetControlID="TextBox1"/>
<asp:TextBox ID="TextBox1" runat="server" 
    AutoPostBack="True" 
    OnTextChanged="TextBox1_TextChanged" 
    Columns="50"></asp:TextBox>        

Please let me know how it goes and if it is of any use. Good luck!

 

kick it on DotNetKicks.com

25 Comments to “See search results as you type – An ASP.NET Ajax Control”

  • See updated search results as you type - ASP.NET Forums says on June 19th, 2007 at 5:27 pm :

    [...] Live Demo and Source Code [...]

  • Steve says on July 6th, 2007 at 8:32 pm :

    Remy,

    Excellent job getting this to work with the final release. I have been struggling with this for good while.

    One question. Have you been able to get the UpdateProgress control to work with this? It doesn’t work when placed into your example nor my page. I can get it to work if the ajax callback is from say a button but not when it is triggered from your control.

    Thanks,
    Steve

  • Remy Blaettler says on July 9th, 2007 at 2:28 pm :

    The UpdateProgress Control has some short comings when it comes to triggering an update from a control outside the update panel. It normally works fine if everything is in the same UpdatePanel. If the update comes from outside, you can remove the Trigger section (but it then will update from all controls).
    If you remove the Triggers section in my example, the UpdateProgress will work.
    Hope that helps.

  • Rupinder says on August 23rd, 2007 at 2:13 am :

    Hi,

    Thanks for this wonderful tool. Its really been helpful.
    However, I am having two small issues:
    1. First of all, it causes an asynchronous postback even on click of events like “Left Arrow Key”, “Right Arrow Key” etc. Do you know any way we can handle this.

    2. I am using the textbox to filter a gridview for specific rows having both inside an UpdatePanel. Since other events of gridview(Edit/Update) also cause the UpdatePanel to refresh its contents, the filtering gets lost. So, what I have done is not to have the filtering code on textbox’s Pre-Render event. Thus any event which refreshes the gridview contents will have proper filtering done by default. I have also been successful in setting the focus after a post-back. However, the cursor comes back to first position on doing this. Is there a way we can handle this.

    Appreciate your help.

    Thanks,
    Rupinder

  • Terry says on December 27th, 2007 at 2:21 pm :

    When I download you sample and run it, I immediately get:

    Extender control type ‘DelayedSubmit.DelayedSubmitExtender’ does not have any attributes of type ‘System.Web.UI.TargetControlTypeAttribute’. Extender control types must have at least one attribute of type ‘System.Web.UI.TargetControlTypeAttribute’.

    Is there something I’m missing?

    Thanks,
    Terry

  • Remy Blaettler says on January 14th, 2008 at 6:18 am :

    Never seen this myself, but sounds like someone else had this problem (and the solution too):
    http://www.eggheadcafe.com/community/aspnet/17/10027570/ajax-extenders-and-net-3.aspx
    He thinks it’s a problem with .Net 3.5 mixed with the Ajax Toolkit 2. There is a special version of the toolkit for 3.5. Make sure you downloaded the right version.

  • Burki says on April 30th, 2008 at 10:40 am :

    Hi,

    This is a great job first of all.
    I have a problem with submit button. Because with this control, “DefaultButton” property of the Panel which textbox and submit button is inside, becomes disable and also panel slide to bottom a little.
    On live demo this problem can be seen. when return key entered panel is slide to bottom just a little.

    Demo site:
    http://remy.supertext.ch/RemyExamples/DelayedSubmitExample/Default.aspx

    I’ll appreciate your help,
    Burki

  • Burki says on May 1st, 2008 at 8:05 am :

    “DefaultButton property problem is sloved by manually adding this:

    TextBox1.Attributes.Add(
    “onkeydown”,
    “if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById(‘”+ FindImageButton.UniqueID +”‘).click(); return false;}} else {return true;}”);

    But sliding down problem is present. :(

  • Stefan says on May 29th, 2008 at 3:19 am :

    Hi!
    Thanks for a great article.
    I’ve problem when leaving the textbox my gridview clears out.

    My solution:
    - Asp.Net 2.0
    - textbox (for entering the search criteria)
    - gridview (displaying result, EnableViewState=”False”)

    My solution works if I enable viewstate of the grid, but I would prefer not to use it beacuse of the amount of viewstate data in a large grid.

    Leaving the textbox causes a postback without entering the TextChanged-event (because the text isn’t changed since the last update of the grid). Can I do something to solve this issue? Can I perhaps prevent the leaving of the textbox from posting back?

    Thanks in advance!
    / Stefan

  • Jimmy says on June 30th, 2008 at 9:05 am :

    Stefan: I solved this by setting autopostback to false on the textbox and changed the behaviour of the onTimerTick event so that it made the actual postback. I also added some code in onkeydown so that a postback happens when the user hits enter.

  • Burak says on August 15th, 2008 at 2:22 am :

    Jimmy:
    “Leaving the textbox causes a postback without entering the TextChanged-event” I have the same problem.
    How did you solve the problem. Could you please send source code?

  • Kiran says on June 1st, 2009 at 10:26 am :

    Great Stuff.

    I am facing some problem. I have gridview and textbox for search. I update this gridview on search box. Both gridview and search textbox in same update panel. It works fine for first 2 searches after that text box changed event never fires (cursor is already focused in textbox).
    When I click outside the textbox and again set reset the cursor in text box then works fine for more time. I am not sure why this is happended.

    For third time it is not working. If I reset the cursor in textbox then it works fine infinetely.

    Again If I place the textbox outside the update panel it works smoothly. didn’t get the error.

    I appreciate your help on this.

    Thanks in advance

  • Sebastian says on September 25th, 2009 at 11:02 am :

    Damn this is good! Saved me alot of work, i love your work… cheers

  • web tasarımı says on November 12th, 2009 at 6:56 am :

    Never seen this myself, but sounds like someone else had this problem (and the solution too

  • Ajans says on January 2nd, 2011 at 5:55 am :

    Thanks for the information.

  • Mlsoun says on November 24th, 2012 at 4:39 pm :

    Include this to webpart for sharepoint 2010 is IMPOSSIBLE!! Have U tried ?

  • Mlsoun says on November 24th, 2012 at 4:43 pm :

    In sharepoint: Could not find assembly

  • Rémy Blättler says on November 26th, 2012 at 5:13 am :

    We are actually just working on a replacement for this control with jQuery. Personally I would not recommend the Ajax Control Toolkit anymore. And I have never tried it with Sharepoint.

  • James says on January 9th, 2013 at 11:05 am :

    I can’t seem to get this to work. It’s telling me “DelayedSubmitExtender” is not a known element. I have “DelayedSubmit.dll” in the Bin folder so I’m not sure what I have done wrong.

    Interestingly, I do not get this error in your “RemyExamples” but when I load it I do get a security exception error when I try to run it. I would be very greatful if you could respond. Thanks :)

  • Rémy Blättler says on January 9th, 2013 at 11:22 am :

    Sounds like that has nothing to do with my code. Did you Register it on the .aspx page?

  • James says on January 9th, 2013 at 11:42 am :

    Thanks for the reply. Yeah, the registration looks like this:

    Is there something else that I am missing?

  • James says on January 9th, 2013 at 11:44 am :

    Ok, the code didn’t post. But like this:

    Register Assembly “DelayedSubmit” Namespace “DelayedSubmit” TagPrefix “cc1″

    Tried to make it not look like code so that it would post.

    Thanks :)

  • Rémy Blättler says on January 9th, 2013 at 12:20 pm :

    Yep, that looks correct. Difficult to say what else could be wrong, assuming that you registered the dll correctly. Do you have AjaxControlToolkit installed?

  • James says on January 9th, 2013 at 12:38 pm :

    I think so, I just added it to the bin folder. I did it with another file and that worked so I’m not sure. Yeah, I have the AjaxControlToolkit installed. That works for me too :S. Thanks.

  • Rémy Blättler says on January 10th, 2013 at 4:39 am :

    I’m a bit out of ideas. Send me the project to remy AT supertext DOT ch

Leave a Reply

  • Topics
  • Archive
  • Subscribe
  • Facebook
  • Twitter