1

カテゴリとフォーマットされた結果を使用したjQueryオートコンプリートが機能しない理由を理解するのに時間がかかっています。私はSOについて同様の質問をたくさん行い、見つけたすべての提案を試しましたが、何も機能していないようです。

表示は正しいですが、リスト項目を一番上のulに追加していません。1つ追加すると、後続の各結果が同じリスト項目に追加されます。これは、フォーカスと選択の方法が意図したとおりに機能しないことを意味します。

私はもう試した：

  • _renderItemData(ul, item)対。_renderItem(ul, item)
  • .data("item.autocomplete", item)ありとなしrenderItem()
  • renderMenuメソッドのに追加.data("item.autocomplete", {})するul.append
  • カテゴリ一覧項目で使用するクラスを変更します。

どんな助けでもいただければ幸いです。ありがとう！

これが完全なコードとフィドルです：

$(function () {
  function format(item) {
    var cell = '';

    $.each(item.value, function(index, value) {
      cell += "<a class='ui-autocomplete-thumbnail-link' href='" + value.url + "'>";

      cell += "<img class='ui-autocomplete-thumbnail-image' src='" + value.images.small + "' />";

      cell += value.presentation + "</a>";
    });

    return cell;
  }

  $.widget( "custom.categorycomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
      var self = this, current_category = '';

      $.each(items, function(index, item) {
        if (item.label !== current_category) {
          current_category = item.label;
          ul.append($("<li class='ui-category'>" + current_category + "</li>").data("item.autocomplete", {}));
        }

        self._renderItem(ul, item);
      });
    }
  });

var    jsondata = [
    {
        "value": [
            {
                "id": 1,
                "name": "category1-name1",
                "presentation": "category1-presentation1",
                "url": "example.com/category1-url1",
                "images": {
                    "small": "http://sipi.usc.edu/database/preview/misc/4.1.07.png"
                }
            },
            {
                "id": 2,
                "name": "category1-name2",
                "presentation": "category1-presentation2",
                "url": "example.com/category1-url2",
                "images": {
                    "small": "http://sipi.usc.edu/database/preview/misc/4.1.08.png"
                }
            }
        ],
        "label": "category1"
    },
    {
        "value": [
            {
                "id": 3,
                "name": "category2-name1",
                "presentation": "category2-presentation1",
                "url": "example.com/category2-url1",
                "images": {
                    "small": "http://sipi.usc.edu/database/preview/misc/4.1.01.png"
                }
            },
            {
                "id": 4,
                "name": "category2-name2",
                "presentation": "category2-presentation2",
                "url": "example.com/category2-url2",
                "images": {
                    "small": "http://sipi.usc.edu/database/preview/misc/4.1.03.png"
                }
            }
        ],
        "label": "category2"
    }
];

  $('#s1').categorycomplete({
    source: jsondata,
    select: function (event, ui) {
      window.location.href = ui.item.value[0].url.replace(window.location.host, '');

      return false;
    }
  })
  .data( "categorycomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" )
    .data("item.autocomplete", item)
    .append(format(item))
    .appendTo(ul);
  };
});
4

1 に答える 1

1

おそらく次のようなものが必要です。再構築されたJSONに注意してください。

$(function () {
  function format(item) {
    var cell = '';   
      cell += "<a data-url='"+item.url+"' class='ui-autocomplete-thumbnail-link' '>";
      cell += "<img class='ui-autocomplete-thumbnail-image' src='" + item.images.small + "' />";
      cell += item.name + "</a>";  

    return cell;
  }

  $.widget( "custom.categorycomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
      var self = this, current_category = '';

      $.each(items, function(index, item) {
        if (item.label !== current_category) {
          current_category = item.label;
          ul.append($("<li class='ui-category'>" + current_category + "</li>").data("item.autocomplete", {}));
        }

        self._renderItem(ul, item);
      });
    }
  });

var jsondata = [
{
    "label": "category1-presentation1",
    "value": "category1-presentation1",
    "id": 1,
    "name": "category1-name1",
    "url": "example.com/category1-url1",
    "images": {
        "small": "http://sipi.usc.edu/database/preview/misc/4.1.07.png"
    }
},
{
    "value": "category1-presentation2",
    "label": "category1-presentation2",
    "id": 2,
    "name": "category1-name2",
    "url": "example.com/category1-url2",
    "images": {
        "small": "http://sipi.usc.edu/database/preview/misc/4.1.08.png"
    }
},
{
    "value": "category2-presentation1",
    "label": "category2-presentation1",
    "id": 3,
    "name": "category2-name1",
    "url": "example.com/category2-url1",
    "images": {
        "small": "http://sipi.usc.edu/database/preview/misc/4.1.01.png"
    }
}, 
{
    "value": "category2-presentation2",
    "label": "category2-presentation2",
    "id": 4,
    "name": "category2-name2",
    "url": "example.com/category2-url2",
    "images": {
        "small": "http://sipi.usc.edu/database/preview/misc/4.1.03.png"
    }
}
];

  $('#s1').categorycomplete({
    source: jsondata,
    select: function (event, ui) {

        $(this).val('')
        alert('Url is:'+ ui.item.url.replace(window.location.host, ''))


      return false;
    }
  })
  .data( "categorycomplete" )._renderItem = function( ul, item ) {
    return $( "<li>" )
    .data("item.autocomplete", item)
    .append(format(item))
    .appendTo(ul);
  };
});

デモ：http：//jsfiddle.net/xQEsK/

于 2013-02-03T18:32:32.890 に答える