javascript - 自动完成在我的 asp.net mvc 中不显示任何 CSS

Question

我在 View 内有以下标记来实现自动完成:-

<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


              });

    });

除此之外，我还引用了以下用户界面和脚本:-

    "~/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"));

但目前自动完成在返回的项目上不会有任何背景颜色，此外，我还将在我的 View 上显示该项目两次(在文本内部，而另一个在屏幕左侧)，如下所示: -

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

结果: