I have a datalist tag which holds some data by using option tags. However, the data is really long and the options are causing height problem in my page. Please help.

HTML CODE

<div class="col-md-3">
                                    <label class="definer" for="currency"  style="height: 125px;" >
                                        Which currency would you like to see flight ticket prices in? 
                                    </label>
                                        <input type="search" list="currency" class="f_input"
                                        placeholder="Please select a currency" id="currencyInput" style="text-transform: uppercase;">
                                    <datalist id="currency" class="f_input">
            
                                        
                                    </datalist>
</div>

JAVASCRIPT CODE

xhrCurrencyCodes.addEventListener("readystatechange", function () {
      if (this.readyState === this.DONE) {

            var currencyObj = JSON.parse(this.responseText)
            console.log(currencyObj);

            for (let i = 0; i < currencyObj.Currencies.length; i++) {

                  var myCurrency = document.createElement('option')
                  var myCurrencyList = document.getElementById('currency')

                  myCurrency.value = currencyObj.Currencies[i].Code + " (" + currencyObj.Currencies[i].Symbol + ")"
                  myCurrencyList.append(myCurrency)


                

            }