Question

所以我的页面是一名基础学生/班主任。目前，我有两个搜索栏，它们调用不同的API调用，它们均返回一个List。唯一的问题是，当我显示结果时，结果之间会有空格。我遇到的另一个问题是我的模态自动完成功能将结果隐藏在弹出窗口后面。

BOB | Math

TIM | Science

Sarah | ENGLISH

这是我的HTML

<html>
    <div class="card">
    <div class="card-header">Search Name</div>
    <div class="card-body" style="min-height:90px;">
        <div class="form-group row">
            <label class="col-sm-3 control-label text-right">Search</label>
            <div class="col-sm-6 autocomplete">
                <li class="ui-helper-hidden-accessible ui-menu-item"></li>
                <input id="nameSearch" class="col-md-6 form-control mdb-autocomplete input-sm" type="text" placeholder="Enter Name">
            </div>
        </div>
    </div>

    <div class="modal-body mx-0">
    <div class="form-group row">
        <label class="col-sm-3 control-label textRightMiddle">Class Search</label>
        <div class="col-sm-6 contRight autocomplete">
            <input id="classSearch" class="col-md-6 form-control mdb-autocomplete input-sm form-control validate" type="text" placeholder="Enter Class">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-12 contRight autocomplete">
            <li class="ui-helper-hidden-accessible ui-menu-item"></li>
            <input type="text" id="removeAutocomplete" class="btn btn-success form-control mdb-autocomplete input-sm" name="removeClassbutton" placeholder="Enter Class" onClick="removeClassfunction();">
        </div>
    </div>
    </div>
</html>

这是我的JS代码

<script>
$(function(){
    $("#nameSearch").autocomplete({
        delay:100,
        source: function(request ,response){
            $.ajax({
                type: 'GET',
                url: APICALL,
                datatype: 'json',
                data: {
                    term : request.term,
                    'name': $('#nameSearch')[0].value
                }
            });
        }
    });

    $("#classSearch").autocomplete({
        source: function(request ,response){
            $.ajax({
                type: 'GET',
                url: APICALL,
                datatype: 'json',
                data: {
                    term : request.term,
                    'class': $('#removeAutocomplete')[0].value
                }
            });
        }
    });
});
</script>

我尝试将#nameSearch { position: absolute; }和#classSearch{ position: absolute;}添加到我的样式中，但是我没有运气。

编辑1：我不必要地剥离了发现无效的内容，并导致了同样的问题。

Answer 1

“结果之间有空格”是什么意思？是每个列表项中的空格还是之间的空格？

如果您指的是每种样式之间的间隔，则必须查看服务器代码而不是前端代码。而且，如果您的意思是两者之间的间隔，则将其移近。

您的“模态问题将结果隐藏在弹出窗口后面”，只需将CSS放到：z-index：99999！important;在您的CSS文件中

Answer 2

因此，我意识到这种问题不是JS或HTML代码的问题。归结为其他人放置的CSS代码。原来我有这个

.ui-menu-item {
            top: 27% !important;
            background: #B1D3C5;
            z-index: 999;
            margin:24px 0 0 -40px !important;
            padding:5px; left: 8px !important;
            width: auto; list-style: none;
            border-radius:2px;
        }

margin导致在每个结果之后添加多余的空间。我删除了它，这解决了我的问题。

jQuery自动完成功能在结果和结果之间不会有模态显示

2 个答案: