I have use following method to get autosuggest texts from mysql tables.
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Issue a new Book</h4>
</div>
<div class="modal-body">
<form method="post" id="insert_form">
<label>Enter Book Name</label>
<input type="text" name="book_name" id="book_name" class="form-control" />
<br />
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="dataModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body" id="employee_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$( "#book_name" ).autocomplete({
source: 'bookname-search.php',
});
});
</script>
But the issue is suggested texts are not showing on top of popup container but behind on it. Can someone help me to solve this issue?