web-dev-qa-db-ja.com

jQuery Autocomplete .data（ "autocomplete"）は未定義です

以下のコードを使用してオートコンプリートを実装しようとすると、次のエラーが表示されます。

.data("autocomplete") is undefined

.data（）メソッドを最後から削除しても、うまく機能します（.data（）が提供するカスタマイズ可能なグラフィックスがなければ）。誰が間違っているのか教えてもらえますか？

$("input#testInput").bind("autocompleteselect", function (event, ui) {

  }).autocomplete({
      appendTo: "#autoCompList",
      source: function (request, response) {
          $.ajax({

              url: JSONP CALL URL
              dataType: "jsonp",
              data: {
                  featureClass: "P",
                  style: "full",
                  maxRows: 12,
                  name_startsWith: request.term
              },
              success: function (data) {
                  response($.map(data.data, function (item) {
                      fbPageJson = item;
                          return {
                              label: item.name,
                              image: item.picture,
                              json: item,
                          }
                  }));
              },
          });
      }

  }).data("autocomplete")._renderItem = function (ul, item) {
      return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label).appendTo(ul);
  };
jqueryautocompleteundefinedjquery-autocomplete
31
Ben Pearce

私は同じ問題を抱えていて、jquery uiの1.10.0バージョンに基づいて、試してみるべきだと思います

data('uiAutocomplete')

の代わりに

data('autocomplete')

ジョニーのコメントに基づいて、.data（）関数の動作を確認しました。はい、セレクタがアイテムを見つけられない場合、jQueryは.data（）呼び出しからnullを返します。

したがって、セレクタに一致する要素がない場合、オートコンプリートオブジェクトは作成されず、カスタムデータオブジェクトに追加されません。

したがって、これを行う方が良いようです：

    $(selector).autocomplete({ your autocomplete config props here });
    if ( $(selector).data() ) {

    // some jQueryUI versions may use different keys for the object. so to make sure,
    // put a breakpoint on the following line and add a watch for $(selector).data(). 
    // then you can find out what key is used by your jQueryUI script.

        var ac = $(selector).data('uiAutocomplete');
        if ( ac ) {
           // do what you want with the autoComplete object. below is the changed version of an example from jqueryUI autocomplete tutorial

           ac._renderItem = function(ul, item) {
                return $("<li>")
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
            };
        }
    }
59
Cagatay Kalan

私は解決策を見つけました！

一部の人々は「ui-autocomplete」が間違っていると考えているため、「autocomplete」または「uiAutocomplete」を使用していますが、それは間違っています。実際、これを行うには「ui-autocomplete」が正しい方法です。

私はあなたと同じ問題を抱えており、友人とこのコードの問題を見つけました。代わりに：

.data('ui-autocomplete')._renderItem = function (ul, item) {
       if (!_.include(self.idArr, item.id)) {
            return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
            }
    };

使用する：

._renderItem = function (ul, item) {
      if (!_.include(self.idArr, item.id)) {
         return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
           }
       };

Comboboxとautocompleteはdata（ 'ui-autocomplete'）を返すので、.data（ 'ui-autocomplete'）と入力すると次のようになります。

.data('ui-autocomplete').data('ui-autocomplete')

何が問題なのか....まあ、実際、なぜこれが機能しないのか、なぜこれが機能しないのかわかりませんが、私を信頼して、.data（ 'ui-autocomplete'）を削除して幸せになります！

8
Paladini

data('ui-Autocomplete')は私の問題を解決しました。 _jquery 1.7_と_jquery-ui 1.8_からだと思います。 data('autocomplete')は大丈夫でした。これらのファイルの最新バージョンを使用した同じスクリプトは機能しません。

8
maladev

実際に成功関数では、responseを呼び出して、次のようなオブジェクトを返します。

return {
           label: item.name,
           image: item.picture,
           json: item,
       }

しかし、次の行で

return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label + " Number of Likes: " + item.likes).appendTo(ul);

返されたオブジェクトで利用できないitem.likesを使用しているため、問題です。次のように使用できると思います

success:function(data) {
    var result = $.map(data, function (item){
    return {
            label: item.name,
            image: item.picture,
            item.likes 
        };
    });
    response(result);
}

また、item.labelを<a></a>内に保持します（エラーの原因ではない可能性があります）。

return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/>"+item.label+"</a>").appendTo(ul);

そして、次の行で確認してください

$.map(data.data, function (item) // notice data.data

data.dataであるか、dataのみであるか。私が関係している限り、どこでも使用しなかったため、オブジェクトからjson: itemを削除することもできます。

更新：次の行を変更

.data("autocomplete")._renderItem = function (ul, item) {...};

に

.data("autocomplete")?._renderItem = function (ul, item) {...}; // notice the ? mark

または

if(typeof $('#Your_Input_Id').val()!="undefined")
{
    $('#Your_Input_Id').autocomplete({....});
}

または

var mydata=$('#Your_Input_Id').autocomplete(...).data('autocomplete');
if(mydata)
    mydata._renderItem = function (ul, item) {...};
4
The Alpha

サイトのデモでコンボボックスの最新の例を見ると、data（ 'ui-Autocomplete'）を使用していることがわかります。私はあなたと同じ問題に遭遇しました。以前はjquery-1.6.2とjquery-ui-1.8.16を使用していました。ファイルをjquery-1.9.1およびjquery-ui-1.10.0に更新すると、エラーは修正されました。古いjquery-uiオートコンプリートはdata（ 'ui-Autocomplete'）プロパティを設定していなかったため、取得時にnull/undefinedだったと思います。おそらく既に問題を修正しているので、これが他の人に役立つことを願っています。

1
Johnny

以下の行を実装できます

.autocomplete（ "インスタンス"）._ renderItem = function（ul、item）{

の状態

.data（ "autocomplete"）._ renderItem = function（ul、item）{

jqueryサイトで入手可能なドキュメントに従って Jquery AutoComplete Documentation and example このコードがあります。

jquery 1.10のアップグレードバージョンから、コードが変更されました。これがあなたのお役に立てば幸いです。

0
Pratik Joshi