Question

我有一个带有ajax autocomplete extender的文本框

我正在使用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

我对你的问题没有一个公平的想法。但我认为文本框填充网格视图的 textchange 事件在 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>";

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

Answer 2

你可以用它。

  $( "#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是从webservice返回的json对象

Ajax AutoComplete以gridview的形式

2 个答案: