Display searched results in modal box search - php

Question

i had one search box in inside modal body . i created one search option for modal i had the result also but outside of modal search working fine but inside modal search results couldn't display any ideas?
My Modal Code :
<div id="myModal" class="modal fade" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div id="job-title-select2" style="display:none;">
<div class="form-group">
<input type="text" id="jobsearch" name="jobsearch" class="form-control" value="" placeholder="Enter Job Title....">
<input type="submit" id="title-button" class="btn btn-info btn" value="Confirm">
</div>
</div>
</div>
</div>
</div>
</div>
jquery code :
$("#jobsearch").autocomplete({
source: function(request, response) {
$.ajax({
url: "{{route('searchexistingjob')}}",
dataType: "json",
data: {term : request.term},
success: function(data) {
/////
}
});
},
minLength: 3,
});
output result in console :
[{id: 6, value: "Analytical thinker"}]
controller return value :
array (
0 =>
array (
'id' => 6,
'value' => 'Analytical thinker',
),
)
so i need to display the value.

Answer 1

Assuming your server side data will be like
$data = array (array ( 'id' => 6, 'value' => 'Analytical thinker'));
echo json_encode($data);
And in your ajax success pass your data back to ajax source response like below.
response(data);
So your ajax code will be,
$.ajax({
url: "{{route('searchexistingjob')}}",
dataType: "json",
data: {term : request.term},
success: function(data) {
response(data);
}
});
Note: If all works fine but still not displaying surely z-index causing the problem. So add below style and try,
.ui-autocomplete {
position:absolute;
cursor:default;
z-index:4000 !important
}

Answer 2

use the below code in your success function
obj = JSON.parse(data);
$("#jobsearch").val(obj.value);
$("#job-title-select2").show();
$('#myModal').modal('show');