JQuery автозаполнение JSON вернуть результат из веб-службы, но он не отображается в раскрывающемся списке - PullRequest
Новая
       6

JQuery автозаполнение JSON вернуть результат из веб-службы, но он не отображается в раскрывающемся списке

2 голосов
/ 11 июля 2010

Я не знаю, что не так с этим кодом.предупреждение показывает, что данные вернулись из веб-службы, но автозаполнение все еще не показывает данные.Я использую ASP.net 2.0 и Google JQuery ссылку 

  $(document).ready(function() {
         $.ajax({
            type: "POST",
            url: "http://localhost/WebService/Service.asmx/getlist2",
            dataType: "json",
            data: "{}",


            contentType: "application/json; charset=utf-8",
            success: function(data) {
         alert("getlist 2");
             alert(data);

                $('#project1').autocomplete({
                    minLength: 2,
                    source: data,

                    focus: function(event, ui) {
                        $('#project1').val(ui.item.TagName);
                        alert(ui.item.TagName);//no alert is fired here
                        return false;
                    },
                    select: function(event, ui) {
                        $('#project1').val(ui.item.TagName);
                        //$('#selectedValue').text("Selected value:" + ui.item.TagID);
                        return false;
                    }
                });
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
     });

и метод веб-службы 

[WebMethod]
[System.Web.Script.Services.ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<Tag> getlist2()
{
    <Tag> tagscollection = new  EntitiesCollection<Tag>();
    ProcessTagList getlisttags = new ProcessTagList();

    string strtag = "";

    Tag tag = new Tag();
    tag.TagName =   strtag;
    tag.UniqueName =   strtag;
    getlisttags.OTag = tag;
    getlisttags.Invoke();
    tagscollection = getlisttags.OTagsCollection;


    ;
      List<Tag> a = new List<Tag>();
    foreach(Tag tagc in tagscollection)
    {
        a.Add(tagc);
    }


    return a;


}

данные, отображаемые в firebug:

[{ "__ типа": "myproject.Common.Tag", "TagID": "21abf6b1-6d45-41e5-a39b-006e621eeb22", "UniqueName": "DotNet", "TagName": "DotNet", "CreatedAt": "/ Date (1255108286850) /"}]

этот код jquery показывает раскрывающийся список веб-службы, использованной в первом примере jquery. 

$("#tbAuto").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "http://localhost/myproject/Service.asmx/getlist2",
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
          //  dataFilter: function(data) { return data; },

            success: function(data) {
                response($.map(data, function(item) {
                    return {
                        value: item.TagName
                    }
                }))
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(errorTrown);
            }
        });
    },
    minLength: 0
});

Ответы [ 3 ]

2 голосов
/ 12 июля 2010

Хорошо, я знаю, что вы используете asp.net, и мой пример основан на PHP и MySQL, но, поскольку ваша проблема связана с ожидаемым автозаполнением формата JSON, я все равно пишу.

Получитьпоследние файлы со страницы jQuery UI .Для автозаполнения нужны UI Core, UI Widget и UI Position из базового пакета.Вам также нужен сам виджет автозаполнения.

Этот пример хорошо работает для меня:

HTML: 

<div>
    <input id="cities" />
</div>

Скриптpart:

(отправляет поисковую переменную в towns.php как towns.php? term =) 

$(function() {
  $("#cities").autocomplete({
    source: "backend/cities.php",
    minLength: 2,
    select: function(event, ui) {
      // perhaps do something with these?
      region = ui.item.id;
      country = ui.item.label;
      city = ui.item.value;
      secret = ui.item.secret;
   }
});
});

PHP в городах. php:

(необходимо использовать переменные id , label и value . Метка используется для заполнения раскрывающегося списка. Значениевводится в поле ввода при щелчке значения метки в списке). 

// important to set header with charset
header('Content-Type: text/html; charset=utf-8');
$term = $_POST["term"];
// some database stuff removed
// loop it through and build array
$n = 0;
    while ($row = $q->fetch()) {
        $row_array[$n]['id'] = $row['City'];
        $row_array[$n]['label'] = $row['Country'];
        $row_array[$n]['value'] = $row['Region'];
        $row_array[$n]['secret'] = 'blabla';
        $n++;
    }
    // encode it to json format
    echo json_encode($row_array);

JSON отправил обратно:

(Когда? term = New York)

[{"id":"New York","label":"United States","value":"New York","secret":"blabla"},{"id":"Minnesota","label":"United States","value":"New York Mills","secret":"blabla"},{"id":"New York","label":"United States","value":"New York Mills","secret":"blabla"}]

Итак, подведем итоги:

  • По умолчанию, она отправляет переменную "term" со словом поиска на серверную страницу.
  • ТребуетсяПеременные «id», «value» и «label» должны быть отправлены обратно.
  • По умолчанию раскрывающийся список заполняется значениями «label».
  • По умолчанию щелчокв списке заполните поле ввода с «значением».
  • Вы можете поместить дополнительные имена переменных и сделать что-то с ними, но необходимо три вышеприведенных.
  • Синтаксис JSON должен выглядеть так, как указано выше.

Надеюсьэто помогает.

2 голосов
/ 11 июля 2010

Вам необходимо установить свойство источника автозаполнения в коллекцию \ массив.Я не думаю, что ваши возвращенные данные один, хотя они могут содержать один.Вам также необходимо переименовать объект на стороне сервера, чтобы указать пару значений метки.например,

{"id": "1", "label": "StackOverflow", "value": "SO"}

Проверьте примеры здесь ииспользуйте firebug, чтобы увидеть, как они возвращают данные json.

Из документов

Локальные данные могут быть простым массивом строк или содержать объекты для каждого элемента в массиве., либо с меткой или значением свойства, либо с обоими.Свойство метки отображается в меню предложений.Значение будет вставлено в элемент ввода после того, как пользователь выберет что-то из меню.Если указано только одно свойство, оно будет использоваться для обоих, например.если вы предоставляете только значения-свойства, это значение будет также использоваться в качестве метки.

Можете ли вы вставить ответ json.

0 голосов
/ 12 июля 2010

Ваши данные не отображаются, потому что автозаполнение ожидает данные определенным образом (идентификатор, метка и значение). Смотрите и другие ответы.

Ваши функции getlist2 предоставляют другую структуру данных (__type, TagID, UniqueName, TagName и CreatedAt).

Попробуйте изменить getlist2, чтобы вернуть правильный синтаксис.

Ваше последнее изменение в начале темы (jquery autocomplete + .ajax) выглядит хорошо, что не работает с этим фрагментом кода?

...