通过输入字段数据调用外部api

Question

Assume a 'part number' input field that is not in a form tag. When the user enters a value, the onblur or a button next to the input field should query an external site via that site's API, and return the 'product name' value.

I have the code that will use the API to return the value. But how to structure the input field so that it calls the API code?

I think I need an AJAX call, but still a noob on Ajax stuff. What code would be used to process the string in the input field. (Note that there is no form tag associated with the input field.) (I primarily use PHP.)

Answer 1

In response to the question and subsequent comments, conceptually it would work as follows then.

The HTML Markup:

<input type="text" id="userInput"> <!--Text input of product id from user-->
<button id="btn">Get Product Name</button> <!--Button to invoke API request-->
<p id="productName"></p> <!--Element used to display product name result from API-->

The Javascript:

//Attach an event listener to the button. 
document.getElementById("btn").addEventListener("click", function(){

    //Get the id of product the user entered
    var productId = document.getElementById("userInput").value;

    //pass productId to the Amazon API

    //receive product name from API

    //Display product name received
    document.getElementById("productName").innerHTML = //The product name received from API

});