onmouseup triggers an extra non regexpression search

frontendplace

When I do a regexp search I get a correct response.
But when I click with the mouse on the input the script triggers a new normal search.

This is caused by this code in the jqFilter functions:

        .on( 'mouseup', function(e) {
            // Edge fix! Edge 17 does not trigger anything other than mouse events when clicking
            // on the clear icon (Edge bug 17584515). This is safe in other browsers as `searchFn`
            // checks the value to see if it has changed. In other browsers it won't have.
            setTimeout( function () {
                searchFn.call(jqFilter[0]);
            }, 10);
        } )

How can I change this behaviour? I don't like to add a third search with a timeout of 11ms.

frontendplace

it looks like it does the first time on mouse up after a search the second time it stays ok. In the searchFn it looks as if the previous search regexp should be used but it doesnt the first time

frontendplace

This code I use to trigger the regexp search:

   searchInput.on('keyup click', () => {
      let regex = '';
      if (searchType === 'start') {
        regex = '^';
      }
      const value = `${regex}${searchInput.val()}`;
      table.search(value, true, false).draw(); // regexp search
    });

frontendplace

This helped me to overcome this problem:

    if (searchType === 'start') {
      // Event listener to the beginletters to redraw on input
      searchInput.on('keyup mouseup', () => {
        let regex = '';
        if (searchType === 'start') {
          regex = '^';
        }

        const value = `${regex}${searchInput.val()}`;

        setTimeout(() => {
          table.search(value, true, false).draw(); // regexp search
        }, 10); // datatable triggers a second search with timeout 10 but then not always with regex enabled
      });
    }

allan

Thanks for posting back. Good to hear you got it working.

For cases when you want to perform your own filtering, I'd suggest creating your own input element, rather than attempting to reuse the one that DataTables adds to the table. Otherwise you'll get weird overlapping actions such as this.

Allan