Submitting search terms instead of live searching (keyup function)

Question

I'm Karl and I'm still new to this place and a rookie when it comes to coding. Please bear with me. I'm more into HTML and CSS. I recently found this Live Search tutorial based on AJAX, JQuery and JSON, where the search function reacts instantly from the moment you start typing in the input field. The keyup() command seems to have something to do with this.

$('#search').keyup(function(){
 var searchField = $('#search').val();
 var myExp = new RegExp(searchField, 'i');
 $.getJSON('data.json', function(data){
  var output = '<ul class="searchresult">';
  $.each(data, function(key, val){
   if((val.name.search(myExp) != -1) || (val.bio.search(myExp) != -1)) {
(...)

I'm currently testing this live search on a local server. (Works like a charm.)

I was wondering if it was possible to send user defined queries / search terms by submitting them via the enter key (the conventional way) and/or via a search/submit button instead. I tried replacing the keyup function with submit. Something like on this video for instance. I tried to apply this kind of submitting, which was mentioned in the aforementioned video, but I didn't get it to work accordingly. I even searched various tutorials via Google, many different videos on Youtube, DailyMotion, etc. and even compared many questions here on stackoverflow and other similar sites. I'm most likely missing the forest for the trees.

Any help would be greatly appreciated. Thank you in advance.

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

To detect if enter button was used you should test event argument "which" for code 13 (some code samples: Submitting a form on 'Enter' with jQuery?).

You should also listening on field's blur event. (http://www.w3schools.com/jsref/event_onblur.asp)

And the last thing: In order to submiting via submit button you should listen on click button for that button. (http://api.jquery.com/on/)

edited May 23 '17 at 11:45

Community

1
1

answered Mar 26 '16 at 19:09

Valker

58
1
5

Hello Valker, thank you for the swift reply. I tried the things out you suggested, but it doesn't seem to want to work. Now I don't get any results at all. In short, no response. I seem to be missing something. I don't want to cause any inconvenience but could you please post the code in full, so I could try it out and see if the search works accordingly (enter key and/or submit/search button)? Like I said, I'm still a rookie in terms of coding. :( – Karl Carlson Mar 26 '16 at 22:29
Maybe in jsfiddle? – Karl Carlson Mar 26 '16 at 22:44

score 0 · Answer 2 · answered Mar 26 '16 at 19:12

0

You can put the search box inside a form, so when the user hits the enter button it will submit... and you stop the normal submit method and send the query parameters with Ajax.

function ajaxSubmit(event){
  event.preventDefault();
  
  alert('submit stopped');
  
  //ajax code here
  

};

<form action="" method="post" onSubmit="ajaxSubmit(event)">
  
  <label for="search">Search box:</label><br>
  <input type="search" placeholder="Write here and press enter" id="search">
  
</form>

answered Mar 26 '16 at 19:12

Claudio King

1,606
1
10
12

Hello Claudio, thank you for the swift reply. I tried the things out you suggested, but it doesn't seem to want to work. Now I don't get any results at all. In short, no response. I seem to be missing something. I don't want to cause any inconvenience but could you please post the code in full, so I could try it out and see if the search works accordingly (enter key and/or submit/search button)? Like I said, I'm still a rookie in terms of coding. :( – Karl Carlson Mar 26 '16 at 21:02

Submitting search terms instead of live searching (keyup function)

2 Answers2