Answers

• bindrid Posts: 730Questions: 0Answers: 119

  June 2017 Answer ✓

  I just don't like trips to the server just cause the user just stops typing. So, I change how the search box works when my serverSide option is set to true.

  1. Remove existing event handlers off the search box.
  2. Add a button next to the search button.
  3. Add event handler for the above button.
  4. Add a key down event handler that watches for the enter key on the search box. If seen, do search.

  In the example of this http://jsbin.com/lawicaj/edit?html,js,output , I am actually creating a bootstrap/fontawsome search box, a tad more than is needed.
• bennyb Posts: 4Questions: 1Answers: 0

  June 2017

  Pretty great, Thank You bindrid!
  Your solution in combination with a fake initial search word...

  "search": {"search": "SomethingWhatDoesNotReturnAnything"},

  Works like a charm!
  It is the perfect solution, at least for me...
  Thank You so much!
  bennyb
• bennyb Posts: 4Questions: 1Answers: 0

  June 2017

  @bindrid Sorry, as your code is great it doesn't actually solve all issues asi found out today, because i can still sent empty search inputs and get the whole list. (What is clear, i just have been to optimistic yesterday but looking at your code makes it clear that there is no validation, sorry).

  I tried this (http://jsfiddle.net/nArYa/7/), but it simply doesn't work:

  $('.input-group').submit(function(e) {
  e.preventDefault();
  $("#focusedInput").each(function(){
  if($.trim(this.value) == ""){
  alert('Please enter some characters...');
  } else {
  // Submit
  }
  })
  })

  Also using HTML pattern, just left me with question marks...
  http://jsfiddle.net/bHWcu/1/

  Any hint?
  Thank You,
  Benjamin
• bindrid Posts: 730Questions: 0Answers: 119

  June 2017 edited June 2017

  Your validation function has to return true or false. e.preventDefault is not enough by itself.

  try this bit of code in the http://jsfiddle.net/nArYa/7/

  $('#form').submit(function(e) {
          var submitMe = true;
          $("input[type='text']").each (function(i, field){
              if($(this).val().trim() == "") {
                  submitMe = false;
                  e.preventDefault();
                  alert("This field cannot be blank");
                  $(this).focus();
                  // stop checking when the first blank one is found
                  return false;
              }
          });
          return submitMe;
  })
  
• bennyb Posts: 4Questions: 1Answers: 0

  June 2017 edited June 2017

  Hm, thank you @bindrid , but this doesn't seem to work.

  Already tried something similar before, but is the submit javascript function attached to a classical html form function?

  I used your code above (http://jsbin.com/lawicaj/edit?html,js,output) and this
  is not a type='text' but a type='search'.
  Could it be that the javascript just works with type='text'?

  My code looks like this now:

  $('#example_wrapper').submit(function(e) {
          var submitMe = true;
          $("input[type='search']").each (function(i, field){
              if($(this).val().trim() == "") {
                  submitMe = false;
                  e.preventDefault();
                  alert("This field cannot be blank");
                  $(this).focus();
                  // stop checking when the first blank one is found
                  return false;
              }
          });
          return submitMe;
  });
  

  i also just tried:
  $("input[type='search']").each (function(i, field)

  Beside that i don't have a <form></form> what also seems to be an issue, maybe?
  Hm, so i am back to square one, somehow, sorry to bother you again....
  Benjamin