我在内部模态体中有一个搜索框。我为模态创建了一个搜索选项我也得到了结果,但在模态搜索之外工作正常,但内部模态搜索结果无法显示任何想法?
我的模态代码:
<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代码:
$("#jobsearch").autocomplete({
source: function(request, response) {
$.ajax({
url: "{{route('searchexistingjob')}}",
dataType: "json",
data: {term : request.term},
success: function(data) {
/////
}
});
},
minLength: 3,
});
输出结果在控制台中:
[{id: 6, value: "Analytical thinker"}]
控制器返回值:
array (
0 => array('id'=> 6,'value'=>'分析思想家',),)
所以我需要显示值。
假设你的服务器端数据是这样的
$data = array (array ( 'id' => 6, 'value' => 'Analytical thinker'));
echo json_encode($data);
在你的ajax成功将你的数据传递回ajax source
响应,如下所示。
response(data);
所以你的ajax代码将是,
$.ajax({
url: "{{route('searchexistingjob')}}",
dataType: "json",
data: {term : request.term},
success: function(data) {
response(data);
}
});
注意:如果一切正常,但仍然没有显示z-index
导致问题。所以添加下面的样式并尝试,
.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>
对于ajax,您可以使用下面的代码
$('#populate-dropdown').autocomplete({
source: "{{route('searchexistingjob')}}",
})
确保从控制器返回的数据应该是JSON。
在成功函数中使用以下代码
obj = JSON.parse(data);
$("#jobsearch").val(obj.value);
$("#job-title-select2").show();
$('#myModal').modal('show');