javascriptwordpresslivesearch

Search Wordpress media with Javascript

For testing purposes I want to search through the media of the featured image in Wordpress. But it seems I can't activate the search through a JavaScript action.

The search DOM on the admin page is:

<input type="search" placeholder="Search media..." id="media-search-input" class="search">

I can change the value of the input field with:

// input text string
document.getElementById('media-search-input').value = "test string";

After changing the input value, no search is being done. I guess I have to trigger the search somehow, But I don't know how?

It seems I can't trigger the search with .click(), .focus() or .blur(). There's also no button to hit because WP has a live search functionality.

Solution

  • So try to trigger keyboard events (keydown, keyup, keypress)

    var elem = document.querySelector("#media-search-input");
var kpEvent = new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13 });
elem.dispatchEvent(kpEvent);

    or try input event

    var event = new Event('input', {
    bubbles: true,
    cancelable: true,
});

elem.dispatchEvent(event);