[英]Display searched results in modal box search
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 : jquery代码:
$("#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', ), ) 0 => array('id'=> 6,'value'=>'分析思想家',),)
so i need to display the value. 所以我需要显示值。
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. 在您的ajax成功中,将您的数据传递回ajax source
响应,如下所示。
response(data);
So your ajax code will be, 所以你的ajax代码将是,
$.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. 注意:如果一切正常但仍未显示z-index
导致问题。 So add below style and try, 所以添加下面的样式并尝试,
.ui-autocomplete {
position:absolute;
cursor:default;
z-index:4000 !important
}
$(function(){ $("#myModal").modal('show'); }); var availableTags = [ {"id":1,"value":"ActionScript"}, {"id":2,"value":"AppleScript"}, {"id":3,"value":"Asp"}, {"id":4,"value":"BASIC"}, {"id":5,"value":"C"}, {"id":6,"value":"C++"}, {"id":7,"value":"Clojure"}, {"id":8,"value":"COBOL"}, {"id":9,"value":"ColdFusion"}, {"id":10,"value":"Erlang"}, {"id":11,"value":"Fortran"} ]; $("#jobsearch").autocomplete({ source:availableTags });
.ui-autocomplete-input { z-index: 1511; } .ui-autocomplete { z-index: 1051 !important; }
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href='https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css' rel='stylesheet'/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <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"> <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>
for ajax you can use below code 对于ajax,您可以使用下面的代码
$('#populate-dropdown').autocomplete({
source: "{{route('searchexistingjob')}}",
})
make sure data return from controller should be in JSON. 确保从控制器返回的数据应该是JSON。
use the below code in your success function 在成功函数中使用以下代码
obj = JSON.parse(data);
$("#jobsearch").val(obj.value);
$("#job-title-select2").show();
$('#myModal').modal('show');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.