How do I leave an autocomplete always in front? Jquery

Question

How do I leave an autocomplete always in front? Jquery

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have the problem that the first time my dialog opens my autocomplete is shown in front and everything is fine, but if I close the dialog and open it again without reloading the page, the autocomplete is left behind the dialogue.

This is my autocomplete code:

            /*Inicia Autocomplete Header Puesto*/
        $( function(){
          $("#puesto_new").autocomplete({
            source: 'auto_header_puesto.php',
            minLength:3,
            select:function(event, data){
              var id = data.item['id'];
              $("#id_header_puesto").val(id);
            }
          });
        });/*Termina Autocomplete Header Puesto*/

And I have this in my CCS:

.ui-autocomplete {
  position: absolute;
  z-index: 2006;
  overflow: auto;
}

I have been testing with different value in my z-index but it is still being left behind.

javascript jquery

asked by M. Gress 06.03.2017 в 18:49

source

2 answers

0

An elegant solution would be to use:

appendTo

To which element should the menu be added. When the value is null , the parents of the input field will be verified for a class of ui-front . If an element with class ui-front is found, the menu will be added to that element. Regardless of the value, if no item is found, the menu will be added to body .

Example:

$("#puesto_new").autocomplete({
  appendTo: "#modalID", // ID del modal o body
  source: 'auto_header_puesto.php',
  minLength:3,
  select:function(event, data){
    var id = data.item['id'];
    $("#id_header_puesto").val(id);
  }
});

answered by 06.03.2017 в 20:07

Can MySQL data be displayed on Android without using listView? All test values with the API have the same values even if you specify others

score 0 · Accepted Answer

I already found an answer to my problem, what is happening is that if I take the z-index that I give in the css, but when I close my dialogue and reopen it a new window is created and this new window has priority above all, so to avoid this problem what I did was put this line of code right after the creation of my jquery dialog

$("#d_agregar_proceso").dialog({
});
$('.ui-dialog[aria-describedby="d_agregar_proceso"]').css('z-index','0');

With this I achieve that this way it closes and opens n times my dialog always goes to go with the z-index minor to the one of my autocomplete.