JQuery UI Автозаполнение WebService Source возвращает JSON

Question

Я два месяца пытался заставить этот код работать, и я близок, но все еще в замешательстве.Я хочу, чтобы функция автозаполнения пользовательского интерфейса JQuery вызывала веб-службу, которая возвращает данные JSON и отображает эти данные для выбора, а при выборе помещает выбранное значение в скрытое поле.

Существует несколько проблем: 1) Автозаполнениефункция не запускается 2) Источник: "/AutoSuggest.asmx/DOTFind?"строка выдает недопустимое исключение объекта 3) Службе требуются два параметра: (строка prefixText, int 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>

и вот веб-служба:

[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

автозаполнение использует 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);
    }
});

В веб-сервисе попробуйте заключить JSON в callback_value (YOUR_JSON);

Но я не уверен насчет получения параметров в WebMethods, поэтому вы можете вместо этого использовать Generic Handler (ashx).

Answer 2

Проблема «код не запускается» оказалась легко обнаруживаемой, когда я использовал FireFox и FireBug.Я видел, что на линии запуска событий возникла проблема с запуском запроса.Когда я настроил эту линию, она начала стрелять хорошо.Затем я столкнулся с рядом проблем типа «не могу использовать GET - необходимо использовать POST» и «возвращаемые данные начинаются с буквы« D »».Я работал с каждым из них, и теперь код работает.Когда я все очистлю, я собираюсь написать это и опубликовать результат где-нибудь.Может быть, здесь.

Answer 3

Я вижу, вы не указали, что .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);
        }
    });