JQuery Ui 1.9.2 : No navigation with autocomplete. 看不到错误。请帮助？

Question

我正在尝试将自动完成功能添加到我的搜索栏中。它有效，但导航有点“隐藏”请参阅:

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

样式.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 开发工具，发现了一些有趣的东西。事实上，当点击时，tab 的宽度会大大增加，参见:

但我不知道该怎么做，JsFiddle 显示我的应用程序没有错误(http://jsfiddle.net/6yXxW/)。我是 Jquery UI 的新手，有人可以帮助我吗？

我忘记将 html 文件与表单和 js(Django 应用程序)共享:

搜索.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
    });
});

Answer 1

尝试移动您的 Bootstrap <style>标记到您的 <style> 底部的以便最后加载。

或者您可以尝试覆盖 css喜欢:

.ui-autocomplete { border: 1px solid #aaaaaa!important; width:250px!important; } .ui-state-focus { border: 1px solid #999999!important; background: #dadada!important; font-weight:normal!important; color: #212121;!important }