DNN: Submit search with Enter key

Question

In DotNetNuke, how can one make the search input box "search" when the user hits enter or return? The markup looks like this:

<div class="search">
     <input type="text" placeholder="Search..." value="" name="q">
     <a class="button" href="#">Search</a>
</div>

There's a button and it works when clicked, but the client is requesting that hitting enter on the keyboard do the same thing. The search feature works correctly and I'm worried about breaking it trying to implement this capability.

I'm backfilling for an employee who quit without notice. I'm a graphic designer, but have some familiarity with ASP.NET MVC. I have zero experience with DNN, tried reading the documentation on their site, but it seemed like it was written in another language. I'm hoping someone can explain this to me in layman's English.

Thanks!

PS - I checked this thread; didn't help: Submit Search on Enter Key?

This Question & Answer may help http://stackoverflow.com/questions/10432692/change-dnn-form-into-normal-get-form/10493074#comment13571411_10493074 — Ryan Doom, Jul 26 '12 at 04:28

score 5 · Answer 1 · answered Oct 30 '12 at 21:53

I know I am a little late to the party, but I stumbled on this question and there is a particular DNN answer to this.

 DotNetNuke.UI.Utilities.ClientAPI.RegisterKeyCapture(txtSearch, btnSearch, 13);

Place that in PageLoad, or PreInit, etc.

This isn't an MVC answer, those are already in this thread, and the controls would have to be standard webforms style controls with runat="server", etc.

DNN 6.2 does introduce the Service Framework, so you can do more MVC/MVVM style coding against it, but if you are running a version less than that, this code will come in handy.

Thanks.

score 3 · Answer 2 · answered Jul 25 '12 at 03:23

jsFiddle link

Basically on keydown you wanna check for keycode 13 (which is the Enter button), then submit your form / whatever logic you have to Search!

$('.search').keydown(function (e) {

  var code = (e.keyCode ? e.keyCode : e.which);
  if (code === 13) { //Enter keycode
     //whatever logic you have for submitting the actual form
     alert('submit hit');
     $('.button').trigger('click');
  }

});

Prashant Lakhlani · Answer 3 · 2013-04-15T10:02:25.283

1

asp.net provides better way to easily do this:

<asp:panel id="pnlSearch" runat="server" cssclass="search" defaultbutton="btnSerach">
     <input type="text" placeholder="Search..." value="" name="q">
     <asp:linkbutton id="btnSerach" cssclass="button">Search</asp:linkbutton>
</div>

Notice the asp:panel has DefaultButton property which will do the trick.

edited Apr 15 '13 at 10:02

answered Jul 25 '12 at 04:58

Prashant Lakhlani

5,758
5
25
39

He's using MVC which won't have panels or anything :/ (Although it's better in every other way, I think MVC will survive lol) – Mark Pieszak - Trilon.io Jul 25 '12 at 13:54
Actually, the project is using DotNetNuke, with which I'm totally unfamiliar. – user1550364 Jul 25 '12 at 14:48
It is not common to use asp.net MVC in DotNetNuke module development. But yes, javascript solution also works – Prashant Lakhlani Jul 26 '12 at 08:04
Unfortunately, the `DefaultButton` property doesn't work for LinkButtons, only real buttons. Also, OP's question doesn't appear to do a postback (`...`), so this won't help, either – bdukes Apr 15 '13 at 14:12

DNN: Submit search with Enter key

3 Answers3