How do i integrate dynamic dependent city and state code select box with http request?

I am trying to create real estate app.I am using Realtor API.When I type the name of a city in an input field I want to fire off http request and get the list of properties for sale in that city.The problem is that in the US there are cities with the same name (in different states).So I need to make both the name of a city and the state code dynamic.If it was just city in question I would put input value in http request, but I don t know how to integrate both city and state code here via select box and make them dynamic. Here s the link to Realtor website to get the idea of what I am trying to achieve.

index.html

<form>
      <input type="text" />
      <br />
      <br />
      <button>Search</button>
    </form>

app.js

document.querySelector("form").addEventListener("submit", searchProperties);
let inputVal = document.querySelector("input").value;

function searchProperties() {
  fetch(
    "https://realtor.p.rapidapi.com/properties/v2/list-for-sale?sort=relevance&city=New%20York%20City&limit=200&offset=0&state_code=NY",
    {
      method: "GET",
      headers: {
        "x-rapidapi-host": "realtor.p.rapidapi.com",
        "x-rapidapi-key": "My_API_Key",
      },
    }
  )
    .then((res) => {
      return res.json();
    })
    .then((response) => {
      console.log(response);
    })
    .catch((err) => {
      console.log(err);
    });
}

This is the piece of code in question

sort=relevance&city=New%20York%20City&limit=200&offset=0&state_code=NY"