0

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!

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();
  • I noticed MDN webdocs has initEvent as depreciated. Should I do it some other way instead? – Isa Dec 5 '17 at 22:32
  • I was able to get this to work with some tweaks, apparently the lsimgspan has to be clicked first somehow I think. But I don't know how to do it with the new Event constructors as I wasn't familiar with them to start with... – Isa Dec 5 '17 at 23:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.