Search code examples
c#asp.net.netscrollbarautocompleteextender

Add Scrollbar in AutoCompleteExtender in ASP.NET 4.5

now I have a question for adding scrollbar in autoCompleteExtender in ASP.NET 4.5. I want to develop textbox with autocomplete System added scrollbar. But, as following code, I can't make scrollbar added autocomplete system

my code is following

aspx&cs file

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompletEextender.aspx.cs" Inherits="AutoCompleteTest6.AutoCompletEextender" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <ajaxToolkit:AutoCompleteExtender
                ID="TextBox1_AutoCompleteExtender"
                runat="server"
                CompletionInterval="50"
                CompletionSetCount="40"
                EnableCaching="False"
                MinimumPrefixLength="0"
                ServiceMethod="GetAutoCompTestListAAAA"
                ServicePath="AutoCompList.asmx"
                TargetControlID="TextBox1">
            </ajaxToolkit:AutoCompleteExtender>
        </form>
    </body>
    </html>



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace AutoCompleteTest6
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class AutoCompList : System.Web.Services.WebService
    {

        [WebMethod]
        public string[] GetAutoCompTestListAAAA(string prefixText, int count)
        {
            string[] aAutoComp = new string[]{
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"};

            string[] filterdList = aAutoComp.Where(str => (0 <= str.IndexOf(prefixText, StringComparison.CurrentCultureIgnoreCase))).ToArray();
            return filterdList;
        }
    }
}

After building, AutoComplete shows no scrollbar. Please teach me.

Solution

  • The addition of a div to hold list elements with an overflow of scroll on the y axis will help with auto complete extender.

    Please try following change to aspx page:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <div id="listPlacement" style="height:100px; overflow-y:scroll;" ></div>
        <ajaxToolkit:AutoCompleteExtender
            ID="TextBox1_AutoCompleteExtender"
            runat="server"
            CompletionInterval="50"
            CompletionSetCount="40"
            CompletionListElementID="listPlacement"
            EnableCaching="False"
            MinimumPrefixLength="0"
            ServiceMethod="GetAutoCompTestListAAAA"
            ServicePath="AutoCompList.asmx"
            TargetControlID="TextBox1">
        </ajaxToolkit:AutoCompleteExtender>
    </form>
</body>
</html>