CODEWITHSUNDEEP
javascriptajaxformsinputgoogle-chrome-extension
Thomas Weiss
Thomas Weiss

Reputation: 375

Add text to input AND trigger ajax search

A website is displaying a lot of items in a table. The table changes as I type into the searchbar at the top, which acts as a filter. This should be automated (client-sided).

I created a Chrome extension to run the script.

The problem:
My script is able to set the searchbar's value to the string that i want it to be using:

document.getElementById('filter').value = "Apple";

The problem is, that the table below is not being updated even though the text inside the searchbar is displaying "apples". If i remove a letter by hand, it instantly updates and filters the results.

Is there any way to "simulate" actual keypresses so the table gets updated?

Edit and almost solution:

I have been trying so hard to make this work and failed every single time. Then I started to learn a bit of jquery and came over this. A single line of code.

$("#filter").val("apple").trigger('keyup');

Works perfectly fine.

I still thank you a lot, marcelino! You've been a big help and you tried so hard to solve my problem with me! Thank you!

Edit_2 and final solution:

The first "solution" didn't work when using it in a chrome extension. This solution works perfectly fine. It changes the value and then fires an ArrowUp event to trigger the filter.

var filter = document.getElementById("filter");
filter.value = "apple";
filter.dispatchEvent(new KeyboardEvent("keyup", {
    bubbles: true,
    cancelable: true,
    key: "ArrowUp"
  }));

Solved here: Different results between chrome console and extension

Upvotes: 1

Views: 790

Answers (1)

m-a-r-c-e-l-i-n-o
m-a-r-c-e-l-i-n-o

Reputation: 2672

You could simulate keypresses by doing:

// more info about keypress simulation at:
// http://stackoverflow.com/a/5920206/1666547
// you don't have to understand how this part works
// just know that it makes the method "document.triggerKeyPress" 
// available for us to use to simulate keypresses
// put this somewhere at the beginning of your script
//Node.prototype.triggerKeyPress = function(char) {
//    var event = document.createEvent('Event');
//    event.initEvent('keyup', true, true);
//    event.keyCode = char.charCodeAt(0);
//    document.dispatchEvent(event);
//}

// this second part you should try your best to understand
// grab the filter element from the D.O.M.
var $filterElement = $('#filter')//document.getElementById('filter')
// set a value to the filter element if you need to
$filterElement.val('Apple')
// focus the cursor on it for typing
$filterElement.focus()
// grab the value from the filter input
// lets say that the "queryInput" is "Apple"
var queryInput = $filterElement.val()
// listen to the event
//window.addEventListener('keyup', function(event) {
  // var actualCharacter = String.fromCharCode(event.keyCode)
  // console.log('Typed:', actualCharacter)
//})

$filterElement.keyup(function (event) {
  var actualCharacter = String.fromCharCode(event.which)
  console.log('Typed:', actualCharacter)
})
// now we are going to iterate through each character of "queryInput"
// and fire a "keyup" event for each character so that table filter
// thinks that someone actually typed the word "Apple" and filters
// accordingly. 
queryInput
.split('') // make string into an array by splitting it on empty spaces
.forEach(function(letter) { // iterate over the characters "A-p-p-l-e"
  // using the "document.fire" method we created above
  var e = jQuery.Event('keyup');
  e.keyCode = letter.charCodeAt(0);
  e.which = letter.charCodeAt(0); // # Some key code value
  $filterElement.trigger(e);
  //document.triggerKeyPress(letter) // fire the "keypress" event
})
<input id="filter" type="text" name="fname">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

I hope that helps.

Upvotes: 3

Related Questions