0

I'm having a textbox with ajax autocomplete extender

I'm extending TextBox1 with Ajax AutoComplete Extender and populating it with the help of WebService.

My requirement is that instead of a dropdown suggestion I should get a GridView like structure with multiple columns with headers. I am using asp.net and ajaxcontrol toolkit

How can I achieve this?

Any help or suggestion.

public partial class AutoComplete : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }


 [System.Web.Script.Services.ScriptMethod()]
 [System.Web.Services.WebMethod]
public static List<string> GetNames(string prefixText)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["GridConnection"].ToString());
        con.Open();
        SqlCommand cmd = new SqlCommand("select TOP 15 Name,Address,Grade from StudentDet where Name like @name+'%'", con);
        cmd.Parameters.AddWithValue("@name", prefixText);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        List<string> ItemCodes = new List<string>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            ItemCodes.Add(dt.Rows[i][0].ToString()+""+dt.Rows[i][1].ToString()+" "+dt.Rows[i][2].ToString());
        }
        return ItemCodes;

Markup is as follows

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<script type="text/javascript" language="javascript">
function onListPopulated() {

    var completionList = $find("AutoCompleteEx").get_completionList();
    completionList.style.width = 'auto';
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<p>
<br />
<asp:TextBox ID="txtAutoCmplte" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="txtAutoCmplte_AutoCompleteExtender" 
    runat="server" CompletionInterval="1" ServiceMethod="GetNames" 
    TargetControlID="txtAutoCmplte" 
        CompletionListCssClass="autocomplete_completionListElement" 
        MinimumPrefixLength="1" BehaviorID="AutoCompleteEx" 
        onclientpopulated="onListPopulated">
</asp:AutoCompleteExtender>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</p>
<p>
</p>
</asp:Content>
    }
}

CSS is as follows

.autocomplete_completionListElement 
{   
    width:500px;
    margin : 0px!important;
    background-color : inherit;
    color : windowtext;
    border : buttonshadow;
    border-width : 1px;
    border-style : solid;
    overflow :auto;
    height : 200px;
    text-align : left; 
}
4

2 回答 2

0

你可以用这个。 

  $( "#autocompletePeople" ).autocomplete({
minLength: 0,
source: peoples,
focus: function( event, ui ) {
    $( "#autocompletePeople" ).val( ui.item.label );
    return false;
},
select: function( event, ui ) {
    $( "#autocompletePeople" ).val( ui.item.label );
    return false;
}
 })
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
    .data( "item.autocomplete", item )
    .append( "<table><tr><td>" + item.label + "</td><td>" + item.desc + "</td></tr></table>" )
    .appendTo( ul );
};

其中 source people 是从 web 服务返回的 json 对象

于 2013-05-30T08:21:24.020 回答
0

我对你的问题没有一个公平的想法。但我认为是关于文本框的textchange事件Fill Gridview在UpdatePanel中使用网格视图...并从更新面板触发一个 textchange 事件，因此当您在文本框网格视图中输入文本时，它将看起来像从选择中自动填充网格视图填充另一个文本框。

希望这可以帮助。

稍后将尝试发布代码..

编辑：

好的，那么你可以做的一件事..

当您退回物品清单时

for (int i = 0; i < dt.Rows.Count; i++)
        {
            ItemCodes.Add(dt.Rows[i][0].ToString()+""+dt.Rows[i][1].ToString()+" "+dt.Rows[i][2].ToString());
        }

像这样使用。

首先创建一个字符串

string a = "<b><a href='"#"'> first col value </a></b> ;&nbsp;&nbsp;&nbsp <b>a href='"#"'>second col</a></b> ;&nbsp;&nbsp;&nbsp <b>a href='"#"'>third col</a></b>";

然后直接将此字符串列表附加到您的文本框下的下拉 div 中，这样它看起来就像我们有一个网格视图.. 将在晚上发布我在我的网站上创建这种类型的代码的代码。

于 2013-05-30T08:15:29.523 回答