2

I am trying to programmatically trigger a search using the "Find an Item" search box within SharePoint 2013 List Search Box.

The plan is to insert text into the search box (an input control) using jquery and then trigger the search button click.

enter image description here

The text gets inserted ok but the button click does nothing. It appears that the text has not been pushed through to the input fully, as when i click on the search box, the text disappears. Any help would be great.I am using below code but it is not working:

$(document).ready(function () {
    SP.SOD.executeFunc("SP.UI.ListSearchBox.js", "SP.UI.ListSearchBox", process);
});
function process() {

    $("#inplaceSearchDiv_WPQ2_lsinput").trigger("click").focus().val("057431");
    $("#inplaceSearchDiv_WPQ2_lsimg").trigger('click');
}
  • I have found similar question at a link. May this will help you. – Ganesh Sanap Sep 2 '18 at 13:15
0

Try using the code given below:

var input = document.getElementById("inplaceSearchDiv_WPQ1_lsinput");
input.value = "SearchText";
var event = document.createEvent("Event");
event.initEvent('input', true, true)
input.dispatchEvent(event);
var button = document.getElementById("inplaceSearchDiv_WPQ1_lsimg")
button.click();

Hope this will help you.

  • have you tried this? – Ganesh Sanap Nov 15 '18 at 12:50
0

We can use the code below to achieve it.

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){    
    var searchInput = document.getElementById("inplaceSearchDiv_WPQ2_lsinput");
    searchInput.value = "057431";
    var event = document.createEvent("Event");
    event.initEvent('input', true, true);
    searchInput.dispatchEvent(event); 
    $("#inplaceSearchDiv_WPQ2_lsimg").click();
});
</script>
  • That's what i have suggested (in pure javascript).....No need to use extra jQuery file too :) – Ganesh Sanap Sep 4 '18 at 5:44
0

Try this it will work by keypress

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $("#myInput").on("keyup", function () {
        var value = $(this).val().toLowerCase();
        $("#onetidDoclibViewTbl0 tr").filter(function () {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});
</script>
<input id="myInput" type="text" placeholder="Search..">
  • Kishore is asking about triggering a search using the OOTB "Find an Item" search box on list views. – Ganesh Sanap Sep 4 '18 at 5:40
0

JQuery's event system is a wrapper around native events and in general are only meant to handle bindings created in JQuery itself - they won't always trigger native DOM event handlers. Chances are you'll need to use native javascript to trigger the native event that would be handled in this case

See here

jQuery's event handling system is a layer on top of native browser events. When an event handler is added using .on( "click", function() {...} ), it can be triggered using jQuery's .trigger( "click" ) because jQuery stores a reference to that handler when it is originally added. Additionally, it will trigger the JavaScript inside the onclick attribute.

The .trigger() function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery's event system that corresponds to these events.

(emphasis mine)

Per this page, you should use native javascript methods to trigger the event, such as document.createEvent()

0

Below code worked for me. Used helpful code from previous posts, Thanks for your efforts

$(document).ready(function () {

    SP.SOD.executeFunc("SP.UI.ListSearchBox.js", "SP.UI.ListSearchBox", process);    
    function process() {

                window.setTimeout(function () {
                    var searchInput = document.getElementById("inplaceSearchDiv_WPQ2_lsinput");
                    searchInput.value = 057431;
                    var event = document.createEvent("Event");
                    event.initEvent('input', true, true);
                    searchInput.dispatchEvent(event);
                    var btn = $("#inplaceSearchDiv_WPQ2_lsimg");
                    btn.click();
                }, 1000);
            }
        }
    }
});

Still I would like to avoid setTimeout, please post your answer here if you are able to avoid 1 second delay.

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.