Question

我已经尝试了两个月才能使这段代码正常工作，而且我很接近，但仍然感到困惑。我希望JQuery UI Autocomplete函数调用一个Web服务，该服务返回JSON数据并显示该数据以供选择，并在选择时将所选值放入隐藏字段。

有几个问题： 1）自动完成功能未触发 2）来源：“/ AutoSuggest.asmx / DOTFind？” line抛出无效对象异常 3）该服务需要两个参数：（string prefixText，int count） - count告诉它要返回多少条记录。 4）我完全不确定此代码是否接受从服务返回的JSON数据

这是代码：＆lt;％@ Page Language =“C＃”AutoEventWireup =“true”CodeFile =“Default2.aspx.cs”Inherits =“Default2”％＆gt;

Untitled Page

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

这是网络服务：

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

我非常感谢您提供的任何帮助。

谢谢，

鲍勃

Answer 1

我发现您没有指定.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);
        }
    });

Answer 2

autocomplete使用JSONP，而不是JSON，

所以添加参数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);
    }
});

在webservice中尝试将JSON包装成callback_value（YOUR_JSON）;

但我不确定在WebMethods中获取参数，因此您可以使用Generic Handler（ashx）。

Answer 3

当我使用FireFox和FireBug时，“代码未触发”问题很容易被发现。我可以看到事件触发线在启动请求时出现问题。当我调整那条线时，它开始点火了。然后我遇到了一系列问题，比如“不能使用GET - 必须使用POST”和“返回的数据以'D'开头”。我通过他们每个人，现在代码工作。当我把它全部清理干净时，我会把它写完并将结果发布到某个地方。也许在这里。

JQuery UI自动完成WebService Source返回JSON

3 个答案: