jQueryUI1.9.2：没有自动完成的导航。Can'；我看不到虫子。请帮忙？

我正在尝试将自动完成添加到搜索栏。它可以工作，但导航有点“隐藏”，请参见：

如您所见，导航“选项卡”被隐藏。我检查了my style.css并添加了重置css代码：

Style.css

    html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
* { all: unset }

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*                          - - - - -  - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
    .form-wrapper {
      position: absolute;
        width: 450px;
        padding: 15px;
        margin: 230px auto 80px 396px;

    }

    .form-wrapper input {
        width: 400px;
        height: 40px;
        padding: 10px 5px;
        float: left;
        font: bold 20px 'Arial', 'trebuchet MS', 'Tahoma';
        border: 2;

        -moz-border-radius: 3px 0 0 3px;
        -webkit-border-radius: 3px 0 0 3px;
        border-radius: 9px;
    }

    .form-wrapper input:focus {
        outline: 0;
        background: #fff;
        -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        box-shadow: 0 0 1px rgba(0,0,0,.8) inset;
    }

    .form-wrapper input::-webkit-input-placeholder {
       color: #999;
       font-weight: normal;
       font-style: italic;
    }

    .form-wrapper input:-moz-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }

    .form-wrapper input:-ms-input-placeholder {
        color: #999;
        font-weight: normal;
        font-style: italic;
    }

  /*  - - - - - - - - - - - - - -  - - - - - - -  - - */

h3{ /* results for %% */
    position: absolute;
    margin: 330px auto auto 550px;
    font-family: "DIN Condensed", Arial;
    font-size: 30px;

}

.comment {
    margin: 380px 310px -350px 350px;

}

a {
    text-decoration: none;
    color: #005ca9;
}



.link{

    font-size: 25px;
    font-family:  "Avenir Next", "Helvetica Neue", Arial;
    text-decoration: none;
    color: black;
    padding-top: 3px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;

}

.link:hover{

    text-decoration: none;
}

img {
    position: absolute;
    margin: 90px auto auto 340px;
    background-repeat : no-repeat;
}

.nothing{
  font-size: 24px;
  position: absolute;
  margin: 430px auto auto 466px;
}

.maybe{
  font-size: 24px;
  position: absolute;
  margin: 430px auto auto 376px;
}

.autocomplete{
  text-decoration: none; 
  color: black;
  font-size: 20px;
}

我检查了chrome开发工具，发现了一些有趣的东西。事实上，单击时，选项卡宽度大幅增加，请参见：

但我不知道该怎么办，JsFiddle在我的应用程序（）中没有显示任何错误。我是jQueryUI新手，有人能帮我吗

我忘了与表单和js（Django应用程序）共享html文件：

search.html：

<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" >
<img src="{% static "monky.png" %}" alt="Monky" galleryimg="no"/>
<form method="get" action="." class="form-wrapper cf">

            {% for field in form %}
        <div class="fieldWrapper">
             {{ field}}
        </div>

            {% endfor %}
</form>

<script type="text/javascript">
function monkeyPatchAutocomplete() {

    var oldFn = $.ui.autocomplete.prototype._renderItem;

    $.ui.autocomplete.prototype._renderItem = function (ul, item) {
        var re = new RegExp("^" + this.term, "i");
        var t = item.label.replace(re, "<span style='font-weight:bold;color:black;'>" + this.term + "</span>");
        return $("<p></p>")
            .data("item.autocomplete", item)
            .append("<a class='autocomplete'>" + t + "</a>")
            .appendTo(ul);
    };
}

$(function () {

    monkeyPatchAutocomplete();

    var availableTags = [
        "Comédie",
        "Horreur",
        "Coloré",
        "corala"];

    $("#search_bar").autocomplete({
        source: availableTags
    });
});

{%形式的字段为%}
{{field}}
{%endfor%}
函数monkeyPatchAutocomplete（）{
var oldFn=$.ui.autocomplete.prototype.\u renderItem；
$.ui.autocomplete.prototype.\u renderItem=函数（ul，项目）{
var re=新的RegExp（“^”+此术语“i”）；
var t=item.label.replace（re，“+this.term+”）；
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+t+”）
.附录（ul）；
};
}
$（函数（）{
monkeyPatchAutocomplete（）；
var availableTags=[
“Comédie”，
“荷勒尔”，
“颜色”，
“科拉拉”]；
$（“#搜索栏”）。自动完成({
资料来源：availableTags
});
});

尝试将引导

标记移动到

的底部，以便最后加载

或者您可以尝试覆盖

css

，如：

.ui自动完成{
边框：1px实心#aaaaa！重要；宽度：250px！重要；
}
.ui状态焦点{
边框：1px实心#999999！重要；背景：#dadada！重要；
字体大小：正常！重要；颜色：#212121；！重要
}

如果不能够在一个小提琴中重现问题，我不知道我是否能够解决导致错误的原因。但是如果你想尝试一种解决方法，你可以尝试一些css，比如：

.ui自动完成{border:1px solid#aaaaaa！important；width:250px！important；}

确保宽度足够容纳所有单词。这可能是一个工作，为你周围，而你看看发生了什么…它的工作！！！但是有一个小问题，当你浏览所选建议的背景时，仍然是白色的。嗯，你可以试试<代码>用户界面状态焦点{border:1px solid#999999！重要；背景：#dadada！重要；字体重量：normal！重要；颜色：#21212121；！重要}您也可以尝试将代码移动到页面上最后加载引导CSS的位置。这可能会有帮助。例如，如果您有多个

标记，请将引导程序移动到最底部。它成功了！非常感谢，你应得的！