jQueryのautocompleteの候補の表示のされ方

###前提・実現したいこと
jQueryを使ってオートコンプリート機能付きのテキストボックスを作成しようとしていますが、以下の問題が発生してしまい、対応策が見つからないため質問します。

###発生している問題・エラーメッセージ
以下のようなソースコードを書いてテキストボックスに入力した値に応じた候補が表示されるところまではできました。しかし、その候補の表示のされ方が、想定と異なるものとなってしまいます。

想定している表示

現在の表示

###該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>オートコンプリートのテスト</title>
6  <style>
7    .ui-helper-hidden-accessible {
8	  display: none;
9    }
10  </style>
11  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/base/jquery-ui.css" />
12  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
13  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
14  <script>
15  $(function() {
16    var data = [
17      "ActionScript",
18      "AppleScript",
19      "Asp",
20      "BASIC",
21      "C",
22      "C++",
23      "Clojure",
24      "COBOL",
25      "ColdFusion",
26      "Erlang",
27      "Fortran",
28      "Groovy",
29      "Haskell",
30      "Java",
31      "JavaScript",
32      "Lisp",
33      "Perl",
34      "PHP",
35      "Python",
36      "Ruby",
37      "Scala",
38      "Scheme"
39    ];
40    $('#keywd').autocomplete({
41      source: data,
42      appendTo: '#menu',
43      minLength: 2,
44      autoFocus: true,
45      select: function(e, ui) {
46        if (ui.item) {
47          $('#details').html(ui.item.details);
48        }
49      }
50    });
51  });
52  </script>
53</head>
54<body>
55  <div class="ui-widget">
56    <label for="keywd">キーワード</label>
57    <input id="keywd" />
58    <span id="details"></span>
59  </div>
60</body>
61</html>

###補足情報(言語/FW/ツール等のバージョンなど)
テストで使っているブラウザはGoogle Chromeのバージョン54.0.2840.71(64-bit)で、OSはEl Capitanです。

行動規範の内容に同意します

回答1件

ベストアンサー

ul要素のCSSにlist-style: none;を指定すればいけると思います。

投稿2016/10/27 14:24

gin

総合スコア2722

s-show

2016/10/27 14:45

ご回答いただきましてありがとうございます。ご回答の通りCSSを設定した上で、スタイルシートのコードを以下の通り変更したらイメージ通りの表示になりました。変更前のコード <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/base/jquery-ui.css" /> 変更後のコード <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

行動規範の内容に同意します