Saturday, January 11, 2014

jQueryUI autocomplete work with modal dialog and zIndex

Hi jQuery Developer ;

This option specifies which element the autocomplete  menu is appended to. By appending the menu to the dialog, the menu should inherit the correct z-index.

Example Syntax :
If your dialog HTML looks like this :
<div>
<input type="submit" id="btnSearch" onclick="showDialog()" />
</div>
<div id="ticket" style="display : none">
<label>name</label><input type="text" id="txtName" name="txtName" /><br/>
<label></label><input type="submit" />
</div>
jQuery syntax :


// Sample Data autocomplete
var availableTags = [
    "58002",
    "50023",
    "50022"
];

jQuery(function($) {
// autocomplete generate for input txtName and append to ticket dialog modal base .    
 $('#txtName').autocomplete({
        source: availableTags
    })
        .autocomplete("option", "appendTo", "#ticket");   

});

// this function show dialog , DIV = "Ticket"
function showDialog(){
$('#ticket').dialog({
        width: 250,
        modal: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    });
}

1 comment: