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