如何格式化自动完成建议? [关闭]

Posted

技术标签:

【中文标题】如何格式化自动完成建议? [关闭]【英文标题】:How to format autocomplete suggestions? [closed] 【发布时间】:2016-11-23 18:25:56 【问题描述】:

对于我当前的项目,我使用 jquery 自动完成功能进行带有自动建议的快速搜索。一般来说,它工作正常。不过,我在格式化方面遇到了麻烦。下面这个链接指向我的例子

   $(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);
       ) );
      
    );
   );
<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>

我尝试在不同的地方添加“margin-bottom”或“margin-top”。没有任何帮助。结果列表始终位于输入字段下方。我也在这里找到了一些帖子,但没有帮助。

有人有想法吗?谢谢。

注意:三个首字母“sch”将列出所有条目。

【问题讨论】:

@Tushar 如果添加https://,可以在jsfiddle.net/reporter/8tmmw9b0/ 下找到最小的完整且可验证的示例。富文本编辑器不接受指向 jsfiddle 的链接(或者我不知道如何创建适当的 jsfiddle 链接) 检查blog.***.com/2014/09/… 【参考方案1】:

我与一位同事一起为我的问题找到了解决方案。

通过添加ul.ui-autocomplete top: &lt;number of pixels&gt;px !important; 解决了我的问题。

主要原因是css文件jquery-ui.css中的css声明覆盖了所有的自定义值。

【讨论】:

以上是关于如何格式化自动完成建议? [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

如何检测iphone应用程序状态变化? [关闭]

Textview环绕视图[关闭]

Jquery UI自动完成 - 如何格式化结果并在结尾添加按钮?

如何自定义格式自动完成插件结果?

TP5模型自动转换格式输出时间戳字段,求助如何关闭

eclipse中如何编译完成后自动保存? 不需要每次编译程序后,ctrl+s再进行编译!