0

オートコンプリート機能に次のコードを使用していますが、sql server 2008andC#を使用してデータベースから値をフェッチする必要がありますasp.net。

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
</head>
<body>

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" />
</div>


</body>
</html>

(EF4およびasp.net)を使用して、データベースからその配列リストの値を取得するにはどうすればよいですか

4

2 に答える 2

1

最初のステップは、オートコンプリートプラグインが解析できるJSON結果を生成するC＃ASP.Netページを作成することです。ドキュメントによると、次の2つの形式を使用できます。

配列：配列はローカルデータに使用できます。
サポートされている形式は2つあります。文字列の配列：["Choice1"、 "Choice2"]
ラベルと値のプロパティを持つオブジェクトの配列：[{label： "Choice1"、value： "value1"}、...]

http://api.jqueryui.com/autocomplete/#option-source

または、関数を使用して必要な形式を解析することもできますが、最も単純なソリューションでニーズを満たすことができるようです。

この種のものに実際には調整されていないASP.Netフォームを使用していると仮定しますが、それでも多少の調整を加えることで機能させることができます。Webアプリケーションのルートに。というページを作成しましょうSearchResults.aspx。

最初に行うことは、次の行を除いてASPXファイルからすべてをクリアすることです。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchResults.aspx.cs" Inherits="ASP.Net_Forms.SearchResults" %>

次に、コードビハインドを自由に変更して、好きな形式で出力できます。この場合、オートコンプリートがネイティブに理解できる構造でJSONを使用します。応答タイプも設定する必要があります。

public partial class SearchResults : System.Web.UI.Page
{
    private class SomeSearchableClass
    {
        public int ID { get; set; }
        public string Name { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // The autocomplete plugin defaults to using the querystring
        // parameter "term". This can be confirmed by stepping through
        // the following line of code and viewing the raw querystring.
        List<SomeSearchableClass> Results = SomeSearchSource(Request.QueryString["term"]);

        Response.ContentType = "application/json;charset=UTF-8";

        // Now we need to project our results in a structure that
        // the plugin can understand.

        var output = (from r in Results
                        select new { label = r.Name, value = r.ID }).ToList();

        // Then we need to convert it to a JSON string

        JavaScriptSerializer Serializer = new JavaScriptSerializer();
        string JSON = Serializer.Serialize(output);

        // And finally write the result to the client.

        Response.Write(JSON);
    }

    List<SomeSearchableClass> SomeSearchSource(string searchParameter)
    {
        // This is where you'd put your EF code to gather your search
        // results. I'm just hard coding these examples as a demonstration.

        List<SomeSearchableClass> ret = new List<SomeSearchableClass>();

        ret.Add(new SomeSearchableClass() { ID = 1, Name = "Watership Down" });
        ret.Add(new SomeSearchableClass() { ID = 2, Name = "Animal Farm" });
        ret.Add(new SomeSearchableClass() { ID = 3, Name = "The Plague Dogs" });

        ret = ret.Where(x => x.Name.Contains(searchParameter)).ToList();

        return ret;
    }
}

そして最後に、正しいソースを使用するようにjQueryを変更します。

$( "#tags" ).autocomplete({ source: "/SearchResults.aspx" });
于 2012-11-20T12:34:02.343 に答える
1

jQueryUI オートコンプリートの例から以下のサンプルを参照してください

あなたが自分でできることを願っています！

必要なのは、何らかのページまたはハンドラーを呼び出して、JSON データを準備することだけです。

  $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "yourpage.aspx",
                dataType: "jsonp",
                data: {

                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });
于 2012-11-20T12:16:04.017 に答える