gridview 形式的 Ajax AutoComplete

Question

我有一个带有 ajax 自动完成扩展器的文本框

我正在使用 Ajax AutoComplete Extender 扩展 TextBox1，并在 WebService 的帮助下填充它。

我的要求是，我应该获得类似 GridView 的结构，而不是下拉建议 有多个带有标题的列。我正在使用 asp.net 和 ajaxcontrol 工具包

我怎样才能做到这一点？

任何帮助或建议。

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;

标记如下

<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如下

.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; 
}

Answer 1

你可以使用它。

  $( "#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 对象

Answer 2

我对你的问题不太清楚。但我认为是关于文本框 Fill Gridview 的 textchange 事件在 UpdatePanel...和 ​​trigger 中使用网格视图strong> 来自更新面板的 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 中，这样看起来我们有一个网格视图。将在晚上发布我在我的网站上创建此类代码的代码。