2

ASP.NET MVC 4、Javascript、JSONでオートコンプリートを使用してテキストボックスを作成しました。オートコンプリートに素敵なレイアウトを付けたいのですが、うまくいきません。プロジェクトには自動的にcssファイルjquery.ui-autocomplete.cssがあります。

これは私がリストに記入する場所です

<li data-role="list-divider">Gemeente</li>
        <li data-role="fieldcontain">
            <div class="ui-widget">
                <input type="text" name="Gemeente" class="ui-autocomplete"/>
            </div>
        </li>

これは私が使用するスクリプトです：

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('.ui-autocomplete').autocomplete({
            source: '@Url.Action("AutocompleteGemeenten")'
            });
</script>

これは私が使用するJSONコードです：

public ActionResult AutocompleteGemeenten(string term)
        {
            List<string> items = new List<string>();

            items = _zoekClient.GetGemeenten();

            List<string> filteredItems = new List<string>();

            filteredItems = items.Where(test => test != null && test.ToLower().Contains(term.ToLower())).ToList();

            return Json(filteredItems, JsonRequestBehavior.AllowGet);
        }

これはcssファイルです

.ui-autocomplete { position: absolute; cursor: default; }   
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

オートコンプリートのレイアウトを変更するのを手伝ってくれる人はいますか？

前もって感謝します

4

1 に答える 1

1

jQuery UIのデフォルトのスタイルを変更したい場合は、いくつかのオプションがあります。

1.デフォルトのcssをオーバーライドします

CSSは最後の宣言の順に評価されます。つまり、最後に定義されたルールが優先されます。jQueryUIスタイルシートで定義されているスタイルをオーバーライドするルールを追加します。ルールを別のCSSファイルに追加し、jQueryUICSSファイルへのリンクの後にそのファイルへのリンクを配置します

<link href="~/Content/jquery.css" rel="stylesheet" type="text/css" />
<link href="~/Content/overrides.css" rel="stylesheet" type="text/css" />

2.生成されたjQueryウィジェットにクラスを追加します

jQueryにはaddClassというメソッドがあります。スタイルルールを使用してCSSクラスを定義し、そのクラスをjQueryウィジェットに追加できます。

定義：

.myClass {      
  display:block;
  float: left;
}

追加：

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $('.ui-autocomplete').addClass('myClass');
    $('.ui-autocomplete').autocomplete({
        source: '@Url.Action("AutocompleteGemeenten")'
    });
});

于 2012-05-08T15:09:33.043 に答える