0

私はこのコードを機能させるために 2 か月間試みてきました。JQuery UI オートコンプリート関数で、JSON データを返す Web サービスを呼び出して、そのデータを選択用に表示し、選択時に選択した値を非表示フィールドに入れるようにします。

いくつかの問題があります: 1) オートコンプリート機能が起動しない 2) ソース: "/AutoSuggest.asmx/DOTFind?" 行は無効なオブジェクトの例外をスローします 3) サービスには 2 つのパラメーターが必要です: (string prefixText, int count) - count は、返されるレコードの数を指定します。4) このコードがサービスから返された JSON データを受け入れるかどうかはまったくわかりません

コードは次のとおりです: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

タイトルのないページ

<script type="text/javascript">
    if ($) {
        $(document).ready(
                function() {
                    $('h4').addClass('tmpFrameworkLoaded');
                    $('h4').text('jQuery successfully loaded and running!');
                }
            );
    }

</script>

<style>
    .ui-autocomplete-loading
    {
        background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
    }
</style>
<div id="divDOTJQuery" runat="server">

    <script type="text/javascript">
        $(function() {
            function log(message) {
                alert(message);
                $("<div/").text(message).prependTo("#log");
                $("#log").attr("scrollTop", 0);
            }
        });

        $("#dotmatch").autocomplete({
            source: "/AutoSuggest.asmx/DOTFind?",
            minLength: 2,
            select: function(event, ui) {
                log(ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value);
            }
        });
    </script>

    <div class="ui-widget">
        DOT Job Title or #:
        <input type="text" id="dotmatch" />
        <input type="hidden" id="DOTNumber" name="DOTNumber" />
    </div>
    <div class="ui-widget" style="margin-top: 2em; font-family: Arial">
        Results:<br />
        <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content">
        </div>
    </div>
</div>
</form>

ここにWebサービスがあります:

[WebMethod(BufferResponse = true, Description = "Lookup a DOT record using part of DOT Number or DOT Title")]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public string DOTFind(string prefixText, int count)
{
    if (count == 0)
    {
        count = 10;
    }
    DOT D = new DOT();

    DataView DV = D.View(prefixText, count);
    List<DOT> items = new List<DOT>();
    foreach (DataRow DR in DV.Table.Rows)
    {
        items.Add(new DOT(SQL.ColumnToString(DR, "DOTNumber").Trim(),SQL.ColumnToString(DR, "JobTitle").Trim()));
    }
    DataContractJsonSerializer serializer = new DataContractJsonSerializer(items.GetType());
    MemoryStream ms = new MemoryStream();
    serializer.WriteObject(ms, items);
    string jsonString = Encoding.Default.GetString(ms.ToArray());
    ms.Close();
    return jsonString;
}

これについてご協力いただけると幸いです。

ありがとう、

ボブ

4

3 に答える 3

0

オートコンプリートはJSONではなくJSONPを使用します

したがって、パラメータcallback =?、または好きなものを追加します

$("#dotmatch").autocomplete({
    source: "/AutoSuggest.asmx/DOTFind?callback=?",
    minLength: 2,
    select: function(event, ui) {
        log(ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value);
    }
});

Webサービスで、JSONをcallback_value(YOUR_JSON);にラップしてみてください。

ただし、WebMethodsでパラメーターを取得するかどうかはわかりません。そのため、代わりにGeneric Handler(ashx)を使用できます。

于 2010-11-30T01:14:14.460 に答える
0

Web サービスからのデータ.autocomplete()を期待するように指定していないようです。これを行うには、 への呼び出しでapplication/json指定します。dataType: "json".autocomplete()

$("#dotmatch").autocomplete({
        source: "/AutoSuggest.asmx/DOTFind?",
        minLength: 2,
        dataType: "json" //specify dataType
        select: function(event, ui) {
            log(ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value);
        }
    });
于 2010-11-29T20:19:14.207 に答える
0

「コードが起動しない」問題は、FireFox と FireBug を使用すると簡単に検出できることがわかりました。イベント発火行でリクエストの起動に問題があることがわかりました。そのラインを調整すると、問題なく発火し始めました。その後、「GET を使用できない - POST を使用する必要がある」、「返されたデータが 'D' で始まる」などの一連の問題に遭遇しました。私はそれらのそれぞれに取り組んだところ、コードが機能するようになりました。すべてがきれいになったら、それを書き留めて、結果をどこかに投稿します。たぶんここ。

于 2010-12-01T16:30:53.143 に答える