Jquery Autocomplete是一種非常實用的Javascript組件,可以用來快速地創建搜索框。除了其基本功能以外,我們還可以通過CSS樣式來美化這個組件。
/*樣式代碼*/ .ui-autocomplete { position: absolute; top: 0; left: 0; padding: 0; margin-top: 3px; border-radius: 2px; border-width: 1px; border-style: solid; border-color: #ccc; background-color: #fff; z-index: 1000; } .ui-menu-item { list-style: none; padding: 3px; margin: 0; cursor: pointer; } .ui-state-focus, .ui-state-active { background-color: #f5f5f5; } .ui-helper-hidden-accessible { display: none; }
在這段代碼中,我們首先定義了Autocomplete下拉菜單的通用樣式,包括了位置、內邊距、邊框粗細、顏色等。然后定義了Autocomplete的每一項的樣式,這里我們使用了無序列表來適配每一項。
最后,我們還對選中的項、懸停的項做了樣式變化的處理,讓用戶更加易于辨認自己的行為。
以上是一種樣式的參考,根據實際需求可以進行相應的調整,以達到更加美觀、用戶友好的效果。