CODEWITHSUNDEEP
dynatable
repo
repo

Reputation: 756

Bind dynatable search to onchange

Im using http://www.dynatable.com/ and there is a search input for filtering data. The problem is it works on hitting enter/losing focus etc and I want to use it on every letter change.

Upvotes: 1

Views: 1097

Answers (3)

Hayden Moulds
Hayden Moulds

Reputation: 19

The following change to the jquery.dynatable.js code will do what you want, and will also update the results when the search input box is cleared with the "x" if you are using one. The reason the clear will also work is the event being used is "input" instead of "keyup" or "change", for reasons detailed in the documentation.

Unlike the input event, the change event is not necessarily fired for each change to an element's value.

Original code

$search
  .bind(settings.inputs.queryEvent, function() {
    obj.queries.runSearch($(this).val());
  })
  .bind('kepress', function(e) {
    if (e.which == 13) {
      obj.queries.runSearch($(this).val());
      e.preventDefault();
    }
  });

Modified code

$search
  .bind(settings.inputs.queryEvent, function() {
    obj.queries.runSearch($(this).val());
  })
  .bind('input', function(e) {
    obj.queries.runSearch($(this).val());
    e.preventDefault();
  });

Note: Based off answer from nexuscreator. Very good answer, helped alot thank you.

Upvotes: 1

The Anish
The Anish

Reputation: 19

worked for me :) 

$search
    .bind(settings.inputs.queryEvent, function() {
      obj.queries.runSearch($(this).val());
    })
    .bind('keyup', function(e) {
      obj.queries.runSearch($(this).val());
      e.preventDefault();
    });

Upvotes: 0

nexuscreator
nexuscreator

Reputation: 845

You can change dynatable to accomodate your needs. At line 1215 of jquery.dynatable.js(version 0.3.1), the search is performed on enter keypress. You may change this to keyup without waiting for enter key press. Default Code:

        $search
        .bind(settings.inputs.queryEvent, function() {
          obj.queries.runSearch($(this).val());
        })
        .bind('keyup', function(e) {
          if (e.which == 13) {
            obj.queries.runSearch($(this).val());
            e.preventDefault();
          }
        });

Modified code:

        $search
        .bind(settings.inputs.queryEvent, function() {
          obj.queries.runSearch($(this).val());
        })
        .bind('keyup', function(e) {
          obj.queries.runSearch($(this).val());
          e.preventDefault();
        });

Upvotes: 3

Related Questions