How do I make a JSONP request from an input field on click, using javascript

Question

I am making a cross-domain request for JSONP using AJAX, and need help figuring out how to do this with an api and an input field that updates the query string in the url. My JS is:

var writeButton = document.getElementById("splitEvent");
var url;
var xhr = new XMLHttpRequest();

function splitInput () {
  var inputString = document.getElementById("inputSearch").value;
  url = "http://www.website.com/?t=" + encodeURIComponent(inputString);
};

xhr.onreadystatechange = function callback () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
      } else {
      alert(xhr.statusText);
  }
};

xhr.open('GET', url, true);

function send (){
  xhr.send();  
}

writeButton.addEventListener("click", splitInput);
writeButton.addEventListener("click",send);

And my HTML is just an input field called "inputSearch" and a button called "splitEvent". I want the user to type in their search criteria in the input field, click the button, and make the request with their criteria in the url, but am having trouble with how/when to make the JSONP request.

Do I make a script tag with my url in it, and a callback function in it as well, and imbed it into my HTML? If so, how could the request be made if the HTML is already loaded by this point?

Also, the API doesn't need a key. It's just a url. If you see anything else you'd like to point out about my code, please let me know :)

Thank you.