下拉列表分裂颜色

时间:2017-05-30 08:10:15

标签: jquery html ajax

我有一个下拉列表,显示我在Active Directory中搜索用户的时间。我使用JQuery UI自动完成功能,但在列表中的4个用户之后,背景颜色会发生变化。 所以这是我的表单,输入自动完成:

<div class="ui-widget">
            <form class="form-inline" method="post" action="~/Home/SearchUserResult">
                <label class="sr-only" for="inlineFormInput"> 
                    Nom et/ou Prénom 
                </label>
            <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" name="searchName" id="searchName" placeholder="Nom et/ou prénom" />
            <img src="~/Content/Images/hourglass.gif" style="display:none" id="loadingImg"/>
             <button class="btn btn-primary" type="submit" id="searchValidate"> Rechercher </button><br />
            </form>
</div>

现在我的jquery脚本:

<script>
    $(document).ready(function () {
        var distName = [];
        var dispName = [];
        $("#searchName").autocomplete({
            source: function (request, response) {
                $("#loadingImg").show();
                $.ajax({
                    url: "/Home/SearchUserWhileTyping",
                    type: "GET",
                    data: { name: $("#searchName").val() },
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                            distName[item.displayName] = item.distinguishedName;
                            //distName.push(item.distinguishedName);
                            dispName.push(item.displayName);
                            return {
                                label: item.displayName
                            }
                        }));
                    },
                    complete: function () {
                        $("#loadingImg").hide();
                    }
                });
            },
            select: function (event, ui) {
                var res;
                var index = 0;
                alert(ui.item.label);
                $.each(dispName, function (key, value) {
                    if (ui.item.label == value)
                        res = distName[value];
                });

                //alert(disName.distinguishedName);
                var link = '@Url.Action("ShowUserInfo", "Home", new { distinguishedName = "value"})';
                link = link.replace("value", res);
                window.location.href = link;
                //window.location.href = Url.ActionLink("Test", "ShowUserInfo", "Home", new {distinguishedName = ui.item.distinguishedName});
            },
            minLength: 4
        })
    });

</script>

在此脚本中,我在您键入时从Active Directory检索值,我还在加载时显示图像,并添加了数组,以便我可以在单击用户时立即重定向。另外,这是我的表格看起来像的图片。谢谢你的帮助!

enter image description here

编辑我注意到css不会更改列表中四个名字的背景颜色。如果我在background-color:lightgrey添加一些css,那么会发生什么:enter image description here

正如您所看到的,上部没有变化,但下部已经改变。这很接近但仍然可见,所以不太好。

0 个答案:

没有答案