2

jQueryはほとんど私を勝ち取っています。私はすでに StackOverflow の回答で多くのことを見てきましたが、私の問題の解決策が見つかりません。

プロジェクトで jQuery UI Autocomplete を使用しています。結果が返されない場合は、デフォルト メッセージをレンダリングする必要があります。以下に示すように、「_renderItem」を使用しています。

var autocompleteDir = $("#search");

autocompleteDir.autocomplete({
    source: function (request, response) {
        populate(request.term, response);

        result = $.ui.autocomplete.filter(result, request.term)

        var item = {};
        item.type = 'loading';
        item.label = "Loading..";
        item.value = "";

        result.unshift(item)

        response(result.slice(0, 10));
    }
});

autocompleteDir.data("ui-autocomplete")._renderItem = function (ul, item) {
    if (item.type === "loading") {
        return $('<li></li>')
            .data("ui-autocomplete-item", item)
            .append("<div style='text-align: center;'>" + item.label + "</div>")
            .appendTo(ul);
    }
};

そして、ここに私がコンソールで得ているものがあります:

Uncaught TypeError: Cannot read property 'type' of null
Uncaught TypeError: Cannot call method 'data' of undefined

jQuery 1.10.2 と jQuery UI 1.10.3 を使用しています。誰かが良いアイデアを持っていますか？

編集1：

「ソース」の前にこれを使用する場合：

response: function(event, ui){ 
                    if (ui.item.type === "loading"){
                        ui.content.push({label:"Loading",value:"Loading"})
                    }

                }

次のエラーがあります。

Cannot read property 'type' of undefined

この問題を解決するのを手伝ってくれたら、"response" を使って "loading" と "none" の結果のフォーマットとスタイルを設定できますか?

編集 2

var populate = function(term, response) {
        $.getJSON(
            '<%= my_rails_path %>.json',
            {search: term},
            function(json) {
                  var result = [];
                  $.each(json, function(key, value) {
                    var item = {};
                    item.type = '';
                    item.label = value.name;
                    item.value = value.name;
                    result.push(item);
                  })

                  if (result.length == 0) {
                    var item = {};
                    item.type = "noResult";
                    item.label = "Create '" + term + "'"; 
                    item.value = term;
                    result.push(item)
                  }

                  response(result);
            }
        );  
};

編集 3

これで問題は解決しましたが、ラベルは文字通り表示されていますが、それをレンダリングしたいと思います。コードを見てください、あなたは理解するでしょう：

 response: function(event, ui){ 
          for(var i in ui.content){
            if (ui.content[i].type==="loading"){
                  ui.content[i] = {
                         label:"<div style='text-align: center;'>Loading</div>",
                        value:""
                                   }
            }
          }
 }

代わりに、UI の途中で「読み込み中」をレンダリングし、すべての文字列がユーザーに表示されます (読み込み中)。

4

1 に答える 1

1

jQuery は、検索結果が返された後、結果が表示される前に発生するイベントを提供するため、使用する必要はありません_renderItem。これは、検索結果が空の場合にデフォルト値を返すように変更できます。応答イベントを参照してください。代わりにこれを行うことができます：

autocompleteDir.autocomplete({

    source: function (request, response) {
        populate(request.term, response);

        result = $.ui.autocomplete.filter(result, request.term)

        var item = {};
        item.type = 'loading';
        item.label = "Loading..";
        item.value = "";

        result.unshift(item)

        response(result.slice(0, 10));
    },

    response: function(event, ui){
        if(ui.content.length === 0){
            ui.content.push({label:"default",value:"value"}); /* modify to your liking */
        } 
    }
});

この手法に変更すると、両方の問題が解決するはずです。

編集：

3 番目の編集で、div の値をページの別の場所で変更する場合は、関数で値を返すのではなく、応答関数でこれを行う必要があります。 

response: function(event, ui){
    if(ui.content.length === 0){
        $('#id-of-div-to-change').text("Loading");
    } 
}
于 2013-09-26T02:17:11.823 に答える