Question posted in
You can find the official documentation here.

Select item from dropdown list on input blur using jQuery – Jquery ajax

In my project I’m using a dropdown menu (bootstrap 4) on input text user entry to provide a list of selectable items.

The HTML code is the following one:

<div class="dropdown">
    <input type="hidden" id="ad_id" name="ad_id" value="">
    <label for="aerodrome" class="control-label">Aerodrome</label>
    <input type="text" class="form-control" id="aerodrome" name="aerodrome" autocomplete="off" placeholder="Search Aerodrome by name, ICAO or IATA code">
    <ul class="dropdown-menu txtaerodrome" role="menu" aria-labelledby="dropdownMenu"  id="DropdownAerodromes"></ul>
</div>

On #aerodrome input keyup, an AJAX script fetch data from remote server and populate the unordered dropdown list with the following code:

$('#DropdownAerodromes').append(`<li role="presentation" class="dropdown-item"><a role="menuitem dropdownAerodromesli" class="dropdownlivalue"  data-id="${value.ad_id}">${value.name} ${value.municipality} (${value.icao}/${value.iata})</a></li>`);

I’d like to fill the input #aerodrome field and the hidden #ad_id with selected li item in the dropdown menu on input blur ( for example when the user hit the tab key and the dropdown has a selected entry )

Any help appreciated to solve this struggling problem ( for me ); thanks a lot

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Sorry but I'm not able to get the code above working fine...this because the dropdown list that I have in my project works like an autosuggest list when the user fill in the input field...so, for example, looking for an airfield name, the dropdown list will be populated with the corresponding aerodromes. At this point, using the up/down key, the user should select the correct item on list...and, at this point, pressing the tab key or click on the select item the corresponding data should populate the input field and the hidden input. Thanks again for any hint


  2. 0

    I put together a little fiddle. It’s a separate dropdown not in the input but I think this is what you wanted. https://jsfiddle.net/5d3xkzs0/1/

    // for keypresses current only tab
// for more keys check https://keycode.info/
$('#DropdownAerodromes').on('keyup', 'li',function(e){
    e.preventDefault();
 
  var code = e.keyCode || e.which;
    
  if (code == 9) { // 9 = tab
    var selected_li = $(this).find('a').html();
    $('#ad_id').val(selected_li);
    $('#aerodrome').val(selected_li);
  }
});

// for normal clicks
$('#DropdownAerodromes li').on('click',function(e){
    e.preventDefault();
  
  var selected_li = $(this).find('a').html();

  $('#ad_id').val(selected_li);
  $('#aerodrome').val(selected_li);
});

    EDIT!
    Okay I see what you mean/wanted. Created another fiddle with the changes, this should be good hopefuly. After you start writing the dropdown will show. You can use up/down arrows to navigate and use tab/enter to select the item to paste into field. Also click works as well. In function populate_field() you will find the additional data-id and data-aircraftid.

    https://jsfiddle.net/dj5ue3b4/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search