javascript - 在搜索栏下拉选项之间添加空格

Question

我正在尝试在搜索栏的下拉列表中的不同选项之间添加空格。目前，所有的选项都集中在一起，因此无法选择特定的选项，而且单词也无法辨认。您可以在 http://codepen.io/anon/pen/fGdKs 查看代码/示例

我试过弄乱 CSS 的很多功能，例如边距、位置，甚至尝试调整 .ui-autocomplete li。 CSS 在这里:

input { 
    border: 0;
    width: 500px;
    height: 38px;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size:16pt;
}

.ui-menu-item {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size:16pt;
    width: 500px;
    height: 26px;
    color: blue;
    position: absolute;
    border-color: #66b1ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    display: block;
    border: 5px outset transparent;
    top: 8px;
    display: block;
}

搜索栏 HTML 如下:

<label for="tags"><form class="searchbox ui-widget" action=""><input id="tags" type="search" placeholder="Select a programming language." /></label></form>

Javascript 如下:

$(document).ready(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

因此，我需要在不同的下拉选项之间添加空格，类似于 Google 作为搜索建议给出的建议/下拉列表。

注意:我使用的是 jQuery ui 库。查看笔 http://codepen.io/anon/pen/fGdKs

Answer 1

您需要从 .ui-menu-item 中删除 position:absolute; 以阻止每个菜单项叠加在最后一个之上。

Demo CodePen

.ui-menu-item {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size:16pt;
    width: 500px;
    height: 26px;
    color: blue;
    /* position: absolute;  <----remove! */
    border-color: #66b1ee;
    -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    -o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
    display: block;
    border: 5px outset transparent;
    top: 8px;
    display: block;
}