我的页面上有两个或两个以上的自动完成功能,并且它们中的两个并排在同一个div中。在结果数据之后,如果我调整页面大小,我的结果会重叠或类似于您在图像上看到的结果
当我输入内容时
我调整大小后
脚注:我无法添加任何代码段,因为代码片段不支持json文件,这就是我必须添加备用链接的原因[请点击此处查看演示]
我正在使用this autocomplete plugin我的代码
$.ajaxSetup({ cache:false });
$('.hotel-list').flexdatalist({
cache:false,
searchContain: false,
textProperty: '{name}',
valueProperty: 'name',
minLength: 3,
focusFirstResult: true,
selectionRequired: true,
searchDisabled: true,
groupBy: 'category',
visibleProperties: ["name", "category", "area","font"],
searchIn: ["name", "category"],
url: 'http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/flex/hotels.json',
relatives: '#relative'
}).on("show:flexdatalist.results", function(ev, result) {
$.each(result, function(key, value) {
result[key]['icon_highlight'] = value.font;
})
});
$('.tur-list').flexdatalist({
cache:false,
searchContain: false,
textProperty: '{name}',
valueProperty: 'font',
minLength: 3,
focusFirstResult: true,
selectionRequired: true,
searchDisabled: true,
groupBy: 'category',
visibleProperties: ["name", "category", "area","font"],
searchIn: ["name", "category"],
url: 'http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/flex/turs.json',
relatives: '#relative'
}).on("show:flexdatalist.results", function(ev, result) {
$.each(result, function(key, value) {
result[key]['icon_highlight'] = value.font;
})
});
.wrap{
width:1004px;
margin:30px auto;
}
.wrap:before,.wrap:after{
content:"";
display:table;
clear:both;
}
.clearfix{
clear:both;
}
input{
float:left;
margin-right:1%;
width:45%;
padding:12px;
border:1px solid #ccc;
}
.item-area{
font-style: italic;
}
.hotel-list,.tur-list{
position:relative;
}
<link href="https://projects.sergiodinislopes.pt/flexdatalist/src/jquery.flexdatalist.css" rel="stylesheet"/>
<div class="wrap">
<input type='text' class="hotel-list">
<input type='text' class="tur-list">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://projects.sergiodinislopes.pt/flexdatalist/src/jquery.flexdatalist.js"></script>