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

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




Ähnliche Beiträge


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



  • See updated search results as you type - ASP.NET Forums am 19. June 2007 5:27 pm Uhr

    […] Live Demo and Source Code […]


  • Steve am 6. July 2007 8:32 pm Uhr

    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 am 9. July 2007 2:28 pm Uhr

    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 am 23. August 2007 2:13 am Uhr

    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 am 27. December 2007 2:21 pm Uhr

    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 am 14. January 2008 6:18 am Uhr

    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 am 30. April 2008 10:40 am Uhr

    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 am 1. May 2008 8:05 am Uhr

    “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 am 29. May 2008 3:19 am Uhr

    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 am 30. June 2008 9:05 am Uhr

    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 am 15. August 2008 2:22 am Uhr

    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 am 1. June 2009 10:26 am Uhr

    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 am 25. September 2009 11:02 am Uhr

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


  • web tasarımı am 12. November 2009 6:56 am Uhr

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


  • Ajans am 2. January 2011 5:55 am Uhr

    Thanks for the information.


  • Mlsoun am 24. November 2012 4:39 pm Uhr

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


  • Mlsoun am 24. November 2012 4:43 pm Uhr

    In sharepoint: Could not find assembly


  • Rémy Blättler am 26. November 2012 5:13 am Uhr

    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 am 9. January 2013 11:05 am Uhr

    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 am 9. January 2013 11:22 am Uhr

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


  • James am 9. January 2013 11:42 am Uhr

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

    Is there something else that I am missing?


  • James am 9. January 2013 11:44 am Uhr

    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 am 9. January 2013 12:20 pm Uhr

    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 am 9. January 2013 12:38 pm Uhr

    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 am 10. January 2013 4:39 am Uhr

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


Leave a Reply

Your email address will not be published. Required fields are marked *



*