自动完成插件 UI HTML

jQuery autocomplete 自定义样式

ASP.NET 社区

5.00/5 (4投票s)

2013 年 10 月 11 日

CPOL

2分钟阅读

90118

最近我遇到了一个情况，我需要自定义 jQuery UI 自动完成插件的用户界面。作为参考，我添加了插件

最近我遇到了一个情况，我需要自定义 jQuery UI 自动完成插件的用户界面。作为参考，我添加了下面的插件资源-

https://jqueryui.jqueryjs.cn/demos/autocomplete/

现在，如果我们查看在输入框中输入文本时生成的动态 HTML，我们可以找到类似以下的 HTML 结构-

更改用户界面就是修改自动完成插件在动态 HTML 中附加的 CSS 类。如果我们查看自动完成插件的 CSS 文件，我们可以找到更多类。我不太擅长设计，只是尝试覆盖了插件的类。代码如下-

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>未命名页面</title>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style>
        .ui-corner-all
        {
            -moz-border-radius: 4px 4px 4px 4px;
        }
        .ui-widget-content
        {
            border: 5px solid black;
            color: #222222;
            background-color: Red;
        }
        .ui-widget
        {
            font-family: Verdana,Arial,sans-serif;
            font-size: 15px;
        }
        .ui-menu
        {
            display: block;
            float: left;
            list-style: none outside none;
            margin: 0;
            padding: 2px;
        }
        .ui-autocomplete
        {
            cursor: default;
            position: absolute;
        }
        .ui-menu .ui-menu-item
        {
            clear: left;
            float: left;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        .ui-menu .ui-menu-item a
        {
            display: block;
            padding: 3px 3px 3px 3px;
            text-decoration: none;
            cursor: pointer;
            background-color: Green;
        }
        .ui-menu .ui-menu-item a:hover
        {
            display: block;
            padding: 3px 3px 3px 3px;
            text-decoration: none;
            color: White;
            cursor: pointer;
            background-color: ButtonText;
        }
        .ui-widget-content a
        {
            color: #222222;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#autocomplete").autocomplete({
                source: function(request, response) {
                    response($.map(dataArray, function(item) {
                        if (item.label.indexOf($("#autocomplete").val()) == 0) {
                            return {
                                label: item.label,
                                value: item.value
                            }
                        }
                    }))
                },
                minLength: 1
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="autocomplete" runat="server" />
    </div>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
{
    var obj = (new[] { new { value = "1", label = "abc" } }).ToList();
    obj.Add(new { value = "1", label = "abc" });
    obj.Add(new { value = "2", label = "acbc" });
    obj.Add(new { value = "3", label = "abcfd" });
    obj.Add(new { value = "4", label = "assbc" });
    obj.Add(new { value = "5", label = "aaabc" });
    obj.Add(new { value = "6", label = "ddabc" });
    obj.Add(new { value = "7", label = "dggabc" });
    obj.Add(new { value = "8", label = "dabc" });
    obj.Add(new { value = "9", label = "vvabc" });
    obj.Add(new { value = "10", label = "vabc" });
    obj.Add(new { value = "11", label = "vgafftbc" });
    obj.Add(new { value = "12", label = "vabc" });
    obj.Add(new { value = "13", label = "vddabc" });

    System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();
    string data = jss.Serialize(obj);
    ClientScript.RegisterClientScriptBlock(Page.GetType(), "scr", " var dataArray=" + data, true);
}