3

I have two autocomplete input fields on one page, each calling a different source.

The first input field is rendered on page load. The second autocomplete input field is returned on an ajax call and resides within a bootstrap modal window.

The first autocomplete works just fine:

$("#IdOfFirstInputField").autocomplete({
    source: (url),
    minLength: 3,
    select: function (event, ui) {
        alert("It works...");
    }
});

The second input field is within a bootsrap modal that has the class ui-front.

I am binding the autocomplete as such, since it is part of a returned ajax call:

$(document).on("keydown.autocomplete", "#IdForSecondInput", function () {
    $(this).autocomplete({
        source: (url2),
        minLength: 3,
        select: function (event, ui) {
            alert("It works...");
        }
    });
});

These custom css styles are being applied to both autocomplete input fields:

.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #ccc
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ui-autocomplete > li {
    padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
    background-color: #DDD;
}
.ui-helper-hidden-accessible {
    display: none;
}

While the first autocomplete works just as expected, the second one works only to the point that the <ul> and list item are being attached to the DOM. However, the style of <ul> is set to display:none;. If I remove this class through the inspector in the browser of choice, I can see that the list is looking perfectly fine.

Any ideas why the <ul> element is set to display:none; after the JSON response is being returned correctly?

It looks like the second input field is losing its focus right after I stop typing within, causing the resulting <ul> to default to display:none;.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
jrn
  • 2,640
  • 4
  • 29
  • 51
  • `display:none` is attached with the element inline OR any class of it getting the `display:none` property? – Rohit.007 May 25 '18 at 17:08
  • `display:none;` is being set for the `
      ` element itself. Not for each `
    • ` element.
     – jrn May 25 '18 at 17:10
  • are you able to replicate it somewhere? – Rohit.007 May 25 '18 at 17:14
  • Can you check if the `ui-helper-hidden-accessible` class is not being attached with that `
      `?
     – Rohit.007 May 25 '18 at 17:15
  • I just noticed that, the second input field is loosing its focus right after I stop typing within, causing the resulting to default to `display:none;`. – jrn May 25 '18 at 17:16
  • Can you try by just initializing the second `autocomplete` as same way you did in the first? Like `$("#IdForSecondInput").autocomplete({` – Rohit.007 May 25 '18 at 17:21
  • I could but when the .js file is being rendered the second element doesn't exist yet, since it is part of an ajax call. – jrn May 25 '18 at 17:23
  • @Rohit.007 even if I initialize the second autocomplete as you mentioned, the input field loses its focus right after I stop typing, causing the `
      ` to be hidden.
     – jrn May 25 '18 at 17:28
  • try `$(document).on("click", "#IdForSecondInput", function () {` – Rohit.007 May 25 '18 at 17:31
  • Still, the `
      ` element is instantaneously set to `display: none;`
     – jrn May 25 '18 at 17:35
  • Can you share your logic somewhere? OR as a trick, you can append a class to make the `
      ` `display: block !important;` if the input is in the focus after focus out you can remove it.
     – Rohit.007 May 25 '18 at 17:37

2 Answers2

0

As hinted in the question, the issue was indeed that the autocomplete input field lost its focus. Since the autocomplete input field was retrieved within a modal window, it triggered a jQuery function which was putting the focus on an input field outside the modal window.

While this solution is very specific for my case, hopefully this short note will still be helpful to someone who is experiencing issues with jQuery's autocomplete not displaying the list properly :-)

jrn
  • 2,640
  • 4
  • 29
  • 51
0

After spending some hours looking for...natively these libs only append to body. a working solution found is, set a class to your form case not set.this examples works like a charm

Answered here

Elton Joani
  • 83
  • 7