How to set up a custom search box for a list by manipulating the list app part search box

Question

So, I have a custom page where I was writing some script to essentially do what the search box of a list app-part would show in a wiki page. However, while I was able to successfully change the text in the field, the text did not register as I clicked on the magnifying glass icon. There are multiple event handlers attached to that search box, and I will admit that I am quite new in trying to figure out what is happening behind the scenes so that I can simply write a script that syncs up another text box with the search box in a normal list app-part.

The line I used to change the input value through console was shown below. It worked, but it didn't work. What was in there got wiped as well when you actually click on the input box...

document.getElementById("inplaceSearchDiv_WPQ4_lsinput").value="******";

I tried using visual events, but for some reason, the event listeners that showed up in dev tools did not show up. I probably made a basic mistake somewhere, but I am still trying to figure out what I should do.

Any help is appreciated. Thanks!

Answer 1

Try the following code. The source is here.

// Set up - wpqID was added since that can change based on the DOM of your wiki page
var wpqID = 4; 
var searchInput = document.getElementById("inplaceSearchDiv_WPQ" + wpqID + "_lsinput");
var searchImgSpan = document.getElementById("inplaceSearchDiv_WPQ" + wpqID + "_lsimgspan")
var searchIcon = document.getElementById("inplaceSearchDiv_WPQ" + wpqID + "_lsimg")

// Click seems to be required on imgspan in order for proper inputting, if you don't do that, sometimes the text disappears on its own.
searchImgSpan.click();
searchInput.value = "******";

// Event using the latest javascript guidelines
var ev = new Event('input', {'view': window, 'bubbles': true, 'cancelable': true});
searchInput.dispatchEvent(ev);

// Runs the search using whatever event handlers that was originally attached to the image
searchIcon.click();