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

Question

So my page is a basic school student/class manager. 因此，我的页面是一名基础学生/班级经理。 Currently I have two search bars which call different API calls which both return a List. 目前，我有两个搜索栏，它们调用不同的API调用，它们均返回一个List。 The only problem is when I am displaying my results they have spaces between the results. 唯一的问题是，当我显示结果时，结果之间会有空格。 Also another problem I am having is my autocomplete for my modal is hiding the results behind the popup. 我遇到的另一个问题是我的模态自动完成功能将结果隐藏在弹出窗口后面。

BOB | Math

TIM | Science

Sarah | ENGLISH

Here is my HTML 这是我的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>

And here is my JS code 这是我的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>

I have tried adding #nameSearch { position: absolute; } 我尝试添加#nameSearch { position: absolute; } #nameSearch { position: absolute; } and #classSearch{ position: absolute;} to my style but I have had no luck. #nameSearch { position: absolute; }和#classSearch{ position: absolute;} ，但我没有运气。

EDIT 1: I am stripping away unneeded that I discovered had no effect and lead me to the same problem. 编辑1：我正在剥离不需要的东西，因为我发现它没有作用，并导致我遇到相同的问题。

Answer 1

What did you mean from "have spaces between the results"? “结果之间有空格”是什么意思？ Is it the space in each list item or space between ? 是每个列表项中的空格还是之间的空格？

If you mean the space between each lish, you must take a look your server code not your frontend code. 如果您要说的是每一种样式之间的间隔，则必须查看服务器代码而不是前端代码。 And if you mean the space between , just move your near . 如果您的意思是两者之间的距离，那就移近吧。

And your problem with "modal is hiding the results behind the popup" simply put css: z-index:99999 !important; 而您的“模态问题将结果隐藏在弹出窗口后面”，只需将CSS放到：z-index：99999！important; in your css file 在你的css文件中

Answer 2

So I realized that this kind of problem wasn't an issue with the JS or HTML code. 因此，我意识到这种问题与JS或HTML代码无关。 It came down to the CSS code that was put in place by someone else. 归结为其他人放置的CSS代码。 Originally I had this 本来我有这个

.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;
        }

And the margin was causing the extra space to be added after each result. margin导致在每个结果之后添加额外的空间。 I removed that and that fixed my issues. 我删除了该问题，并解决了我的问题。

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