自动完成样式问题

时间:2017-05-16 07:43:39

标签: javascript jquery html css autocomplete

我的页面上有两个或两个以上的自动完成功能,并且它们中的两个并排在同一个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>

0 个答案:

没有答案