0

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; 
}
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 は、webservice から返される json オブジェクトです。

于 2013-05-30T08:21:24.020 に答える
0

私はあなたの質問について公正な考えを持っていません. しかし、テキストボックスFill Gridviewのtextchangeイベントについて考えたことグリッド ビューは、別のテキスト ボックスを埋めます。

お役に立てれば。

後でコードを投稿しようとします..

編集：

では、あなたにできることは 1 つあります。

アイテムリストを返却するとき

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 に答える