Delay or stop initial display and don't trigger results before min 3 characters entered in search

Delay or stop initial display and don't trigger results before min 3 characters entered in search

bennybbennyb Posts: 4Questions: 1Answers: 0
edited June 2017 in Free community support

I fear you will tell me to use another solution, as i am no Javascript programmer, but i will have to fire this question after all. Currently using successfully DataTables within 5+ projects, i have a special case this time which i am unable to solve since three days now.

Actually i try to use data tables in a strange way, as i do not want to display the result set initially
a) before a search is executed
b) before a minimum of N characters (let's say 3) are entered in the input[search] field

I tried the following "default" ways:

1.)
"searchDelay": 2000,
This seems to work, but first the first character?

2.)
"serverSide": true,
"deferLoading": 0,
But i never used serverSide before and it always displays all results, let's just say i'd rather don't use it as i seem be to stupid to make that work. Let's say i load the son always live via the ajax call, ok? Sorry...

3.) i pseudo-hacked the result set by using
"search": {"search": "XYZ"},
A search word which is not present, so it will result into 0, but the afterwards load still (of course= gets triggered immediately and you have to manually delete the pre-define search word, what isn't actually userfriendly.

4.) Trying to use .hide and on click or KeyUp .show resulted into - not use useful results.

Then i tried - but hard for me to understand/follow - those tips:
https://datatables.net/forums/discussion/8808/solved-starting-with-empty-table
https://stackoverflow.com/questions/31175340/disable-initial-automatic-ajax-call-datatable-server-side-paging
and 3-5 more...

Beside having the core issue that i am at least very weak with Javascript i run into the issue that many tips are "legacy" and not related to the current version of DT.

Any hint? Everything actually is welcomed, i am a bit desperate by now :(
Thank You very much in advance...
ben

This question has an accepted answers - jump to answer

Answers

  • bindridbindrid Posts: 730Questions: 0Answers: 119
    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.

  • bennybbennyb Posts: 4Questions: 1Answers: 0

    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

  • bennybbennyb Posts: 4Questions: 1Answers: 0

    @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

  • bindridbindrid Posts: 730Questions: 0Answers: 119
    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;
    })
    
  • bennybbennyb Posts: 4Questions: 1Answers: 0
    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

This discussion has been closed.