Question

对于我当前的项目，我使用jquery自动完成功能进行自动建议的快速搜索。一般来说它工作正常。虽然，我在制作时遇到麻烦。在此链接下面指向我的示例

＆＃13;

   $(document).ready(function() {
    var  tagsAutocomplete = ["Schaufenster", "Schauspieler", "Schadenfreude"];
    $("#suche").autocomplete({
      appendTo:"#main1 arrowbox",
      minLength: 3,
      source: function(request, response) {
       var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term),"i");
       response($.grep(tagsAutocomplete,function(item){
        return matcher.test(item);
       }) );
      }
    });
   });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.js"></script>

<div id="canvas">
   <section id="cont-right">
      <div class="systemDiv">
     <nav id="main">
      <ul>
       <li id="main1">
        <ul>
         <li>
          <div class="arrowbox">
           <div class="image-menu-item">
            <input autocomplete="off" class="ui-autocomplete-input" name="query" id="suche" maxlength="180" placeholder="Suchbegriff" tabindex="-1" type="text">
           </div>
          </div>
         </li>
        </ul>
       </li>
      </ul>
     </nav>
    </div>
   </section>
  </div>

＆＃13;

我试图添加＆＃34; margin-bottom＆＃34;或＆＃34; margin-top＆＃34;在不同的地方。什么都没有帮助。结果列表始终位于输入字段下方。我在SO中找到了一些帖子，但是没有帮助。

有人有个主意吗？感谢。

注意：三个第一个字母＆＃34; sch＆＃34;将列出所有条目。

Answer 1

与同事一起，我找到了解决问题的方法。

添加ul.ui-autocomplete {top: <number of pixels>px !important;}解决了我的问题。

主要原因是，css文件 jquery-ui.css 中的css声明会覆盖所有已经过滤的值。

如何格式化自动填充建议？

1 个答案: