Вызов внешнего API через данные поля ввода

Question

Предполагается, что поле ввода 'номер детали' находится вне тега формы. Когда пользователь вводит значение, onblur или кнопка рядом с полем ввода должны запросить внешний сайт через API этого сайта и вернуть значение «имя продукта».

У меня есть код, который будет использоватьAPI для возврата значения. Но как структурировать поле ввода так, чтобы оно вызывало код API?

Я думаю, что мне нужен AJAX-вызов, но все же новичок в Ajax. Какой код будет использоваться для обработки строки в поле ввода. (Обратите внимание, что с полем ввода не связан тег формы). (Я в основном использую PHP.)

Answer 1

В ответ на вопрос и последующие комментарии концептуально он будет работать следующим образом.

Разметка HTML:

<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-->

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

});