Question

我有一个bootstrap 4网站，在其中实现了JQuery自动完成功能，但是jquery自动完成列表项没有响应。

这是我的代码

  jQuery(document).ready(function ($) {
            $(function () {
                $("#autocompSearch").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            url: "pullDocs.php",
                            type: "POST", dataType: "json",
                            data: { inp: request.term, maxResults: 4 },
                            success: function (data) {
                                response($.map(data, function (result) {
                                    return {
                                        label: "Dr." + result.docName + " - " + result.clinicName + " | " + result.clinicCity,
                                        docId: result.docId,
                                        clinicId: result.clinicUsername,
                                        value: "Dr." + result.docName
                                    }
                                }));
                            }
                        });
                    }
                }).data("ui-autocomplete")._renderItem = function (ul, item) {
                    return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a class='ui-corner-all' style='display:block' href='#' onclick='updateHiddenElement(" + item.docId + "," + item.clinicId + ")'><img width='60' height='60' class='rounded-circle' src='images/docimgforac.jpeg' />&nbsp;" + item.label + "</a>")
                        .appendTo(ul);
                };
            });

        });

这是我的样式，我尝试向.ui-autocomplete添加width：200px，这使自动完成容器具有响应能力，但是li标记中的内容没有被包装在容器中，文本从容器中移出。

 .ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;   
    padding: 4px 0;
    margin: 0 0 10px 25px;
    list-style: none;    
    background-color: #000000; /*   For autocomplete entire list's bg color */
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
}

.ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #ffffff;
    white-space: nowrap;
    text-decoration: none;
}

.ui-state-hover, .ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
}
.ui-state-hover, .ui-autocomplete li:hover
{
    color:White;
    background:#ff546c;
    outline:none;
}
.ui-menu-item .ui-menu-item-wrapper:hover
{
    border: none !important;
    background-color: #ff546c;     /*   For autocomplete Li item hover bg color */
}
.ui-helper-hidden-accessible 
{ 
    display:none; 
}

请帮助我如何确保自动完成列表项的响应能力？

Answer 1

我能够找到解决方案，我只是将div中的列表项包含在下面，

.append("<div class='container'><div class='row'><a class='ui-corner-all' style='display:block;' href='#' onclick='updateHiddenElement(" + item.docId + "," + item.clinicId + ")'><img width='60' height='60' class='rounded-circle' src='images/docimgforac.jpeg' />&nbsp;" + item.label + "</a></div></div>")

如何使jQuery自动完成列表项响应

1 个答案: