Question

我为autocomplete multiselect textbox实现了一项功能，效果非常好。

所以现在我的问题是，如果我有3000条记录并在文本框中输入 A ，则会在列表中显示很长的值列表。

看一下下面的截图。

那么，有没有办法通过向列表添加滚动来减少。以下是我的完整代码。

ASPX

<asp:TextBox ID="txt712" runat="server" Width="80%"></asp:TextBox>

Jquery的

$(document).ready(function () {
        SearchText();
    });
    function SearchText() {
        $("#txt712").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Frm_Agreement_Master.aspx/GetAutoCompleteData",
                    data: "{'username':'" + extractLast(request.term) + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                var terms = split(this.value);
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push(ui.item.value);
                // add placeholder to get the comma-and-space at the end
                terms.push("");
                this.value = terms.join(", ");
                return false;
            }
        });
        $("#txt712").bind("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                $(this).data("autocomplete").menu.active) {
                event.preventDefault();
            }
        })
        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }
    }

CS

[WebMethod]
public static List<string> GetAutoCompleteData(string username)
{
    List<string> result = new List<string>();
    using (OracleConnection ObjPriCon = new OracleConnection(System.Configuration.ConfigurationManager.ConnectionStrings["OracleConn"].ToString()))
    {
        using (OracleCommand cmd = new OracleCommand("SELECT DISTINCT survey_area_7_12 FROM xxcus.xxacl_pn_farming_mst WHERE survey_area_7_12 LIKE '%' || :searchtext || '%'", ObjPriCon))
        {
            ObjPriCon.Open();
            cmd.Parameters.AddWithValue(":searchtext", username);
            OracleDataReader dr = cmd.ExecuteReader();
            if (dr.HasRows)
            {
                while (dr.Read())
                {
                    result.Add(dr["SURVEY_AREA_7_12"].ToString());
                }
            }
            return result;
        }
    }
}

让我知道如何添加Scroll以使其不会重叠

Answer 1

使用JQuery UI自动完成功能，您可以执行this：

.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

Answer 2

.ui-autocomplete { 
    max-height: 600px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    z-index:100 !important; 
}

将搜索的文字样式更改为

.ui-autocomplete.ui-widget {
    font-family: Verdana,Arial,sans-serif; //any font 
    font-size: 10px;
}

如果自动完成文本框中的数据很长，则添加滚动

2 个答案: