jQuery自动完成功能在结果之间存在空格，并且结果不会以模态显示

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; } #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 个解决方案

解决方案1
1 2019-09-16 15:58:05

解决方案2
0 2019-09-16 16:28:35

jQuery自动完成功能在结果之间存在空格，并且结果不会以模态显示

问题描述

2 个解决方案

解决方案1 1 2019-09-16 15:58:05

解决方案2 0 2019-09-16 16:28:35

解决方案1
1 2019-09-16 15:58:05

解决方案2
0 2019-09-16 16:28:35