自动完成没有在我的asp.net mvc中显示任何CSS

Question

我在视图中有以下标记来实现自动完成： -

<input  name="term" type="text" data-val="true" data-val-required= "Please enter a value."  data-autocomplete-source= "@Url.Action("AutoComplete", "SecurityRole")"  /> 

以及以下脚本： -

 $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000


              });

    });

除此之外我还引用了以下ui和脚本： -

    "~/Content/themes/base/jquery.ui.core.css",            
                  "~/Content/themes/base/jquery.ui.autocomplete.css",            
                  "~/Content/themes/base/jquery.ui.theme.css"     

     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                            "~/Scripts/jquery-{version}.js",
 "~/Scripts/jquery-ui-{version}.js"));

但是目前自动完成在返回的项目上没有任何背景颜色，而且我将在我的视图上显示两次项目（在文本内部，而另一个在屏幕的左侧），如下所示： -

Answer 1

我遇到了同样的问题。使用this article作为参考（仅供参考，很难阅读），我能够开发以下代码：

//NOTE: I let jQuery UI populate these class names, so this may be different for you

// the class attributed to the autocomplete unordered list 
.ui-autocomplete { 
    margin:0;
    padding:0;
    list-style-type:none; // gets rid of the bullet points
    border: solid 1px #ccc;
    background-color: #fff; // provides a background for the autocomplete returned items
    width: 500px; // it was necessary for me to set the width
}

.ui-autocomplete li {
    font-family: Arial, Verdana, Sans-Serif;
    margin: 1px;
    cursor: pointer;
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
}

// to distinctly see which returned item is selected/hovered over
.ui-autocomplete .ui-state-focus { background-color: #66afe9; } 

// to hide the lower left text
.ui-helper-hidden-accessible { display:none; }

结果：