Ajax/jQueryの結果のドロップダウンリストの作成方法

Question

ajaxとjqueryのUIを使用して、入力欄で検索と選択を行っています。どのように私は表示しないようにドロップダウンのものをスタイルすることができます<ul>弾丸も白い背景がありますか？ IDを使用して検索フィールドを対象にしていますが、ドロップダウンボックスではなく入力ボックスが変更されます。スクリーンショットを添付します。

Answer 1

私のような誰かがjQueryのUIは、Ajax呼び出しのためstylyingで苦労されている場合は、ここで私は、ブートストラップコードはブログからの貼り付けをコピーしていますそれは私のために完全に働いています。

.ui-autocomplete { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    float: left; 
    display: none; 
    min-width: 160px; 
    padding: 4px 0; 
    margin: 0 0 10px 25px; 
    list-style: none; 
    background-color: #ffffff; 
    border-color: #ccc; 
    border-color: rgba(0, 0, 0, 0.2); 
    border-style: solid; 
    border-width: 1px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    -webkit-background-clip: padding-box; 
    -moz-background-clip: padding; 
    background-clip: padding-box; 
    *border-right-width: 2px; 
    *border-bottom-width: 2px; 
    } 

.ui-menu-item > a.ui-corner-all { 
    display: block; 
    padding: 3px 15px; 
    clear: both; 
    font-weight: normal; 
    line-height: 18px; 
    color: #555555; 
    white-space: nowrap; 
    text-decoration: none; 
    } 

.ui-state-hover, .ui-state-active { 
    color: #ffffff; 
    text-decoration: none; 
    background-color: #0088cc; 
    border-radius: 0px; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    background-image: none; 
    } 

Answer 2

CSSソリューション

変更noneにあなたのliタグのリストスタイルのタイプ。そして、あなたのULタグに白い背景を追加

li { 
 
    list-style-type: none 
 
} 
 

 
ul { 
 
    background: white; 
 
}

<ul> 
 
    <li>Option</li> 
 
    </ul