web-dev-qa-db-ja.com

jQuery UIオートコンプリートで結果が検出されない

あなたがそれらを指す前に、はい、私はこのトピックに関する半ダースの投稿をレビューしましたが、なぜこれがうまくいかないのかについてはまだ悩んでいます。

私の目標は、オートコンプリートの結果が0になることを検出することです。コードは次のとおりです。

 $.ajax({
   url:'sample_list.foo2',
   type: 'get',
   success: function(data, textStatus, XMLHttpRequest) {
      var suggestions=data.split(",");

  $("#entitySearch").autocomplete({ 
    source: suggestions,
    minLength: 3,
    select: function(e, ui) {  
     entityAdd(ui.item.value);
     },
    open: function(e, ui) { 
     console.log($(".ui-autocomplete li").size());
     },
    search: function(e,ui) {
     console.log("search returned: " + $(".ui-autocomplete li").size());

    },
    close: function(e,ui) {  
     console.log("on close" +  $(".ui-autocomplete li").size());    
     $("#entitySearch").val("");
    }
   }); 

  $("#entitySearch").autocomplete("result", function(event, data) {

   if (!data) { alert('nothing found!'); }

  })
 }
});

検索自体は正常に機能し、問題なく結果を表示できます。私が理解しているように、私はshould autocomplete（ "result"）ハンドラーで結果をインターセプトできます。この場合、それはまったく起動しません。 （結果の数を参照しない一般的なアラートまたはconsole.logでさえ、決して起動しません）。オープンイベントハンドラーは正しい結果数を表示し（結果がある場合）、検索およびクローズイベントハンドラーは常に1ステップ遅れた結果サイズを報告します。

ここでは明らかな何かを見逃しているように感じますが、見えません。

jqueryajaxjquery-uijquery-ui-autocomplete
88
ScottyDont

jQueryUI 1.9

jQueryUI 1.9はresponseイベントでオートコンプリートウィジェットを祝福しました。これを利用して、結果が返されなかったかどうかを検出できます。

検索が完了した後、メニューが表示される前にトリガーされます。カスタムソースオプションコールバックが不要な提案データのローカル操作に役立ちます。このイベントは、検索結果が存在しないか、オートコンプリートが無効になっているためにメニューが表示されない場合でも、検索が完了すると常にトリガーされます。

したがって、それを念頭に置いて、jQueryUI 1.8で行わなければならなかったハッキン​​グは次のように置き換えられます。

_$(function() {
    $("input").autocomplete({
        source: /* */,
        response: function(event, ui) {
            // ui.content is the array that's about to be sent to the response callback.
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
            } else {
                $("#empty-message").empty();
            }
        }
    });
});​
_

例：http://jsfiddle.net/andrewwhitaker/x5q6Q/

jQueryUI 1.8

JQueryUI APIでこれを行う簡単な方法は見つかりませんでしたが、_autocomplete._response_関数を独自のものに置き換えてから、デフォルトのjQueryUI関数（updatedを呼び出して拡張することができます）オートコンプリートのprototypeオブジェクト）：

_var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
    __response.apply(this, [content]);
    this.element.trigger("autocompletesearchcomplete", [content]);
};
_

そして、イベントハンドラーをautocompletesearchcompleteイベントにバインドします（コンテンツは検索の結果、配列です）：

_$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});
_

ここで行われているのは、オートコンプリートのresponse関数を変数（___response_）に保存してから、 apply を使用して再度呼び出すことです。デフォルトのメソッドを呼び出しているので、このメソッドによる悪影響は想像できません。オブジェクトのプロトタイプを変更しているため、これはすべてのオートコンプリートウィジェットで機能します。

これが実際の例です： http://jsfiddle.net/andrewwhitaker/VEhyV/

私の例では、データソースとしてローカル配列を使用していますが、それは重要ではないと思います。

更新：独自のウィジェットで新しい機能をラップして、デフォルトのオートコンプリート機能を拡張することもできます。

_$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {

  _response: function(contents){
      $.ui.autocomplete.prototype._response.apply(this, arguments);
      $(this.element).trigger("autocompletesearchcomplete", [contents]);
  }
}));
_

呼び出しを.autocomplete({...});から以下に変更します。

_$("input").customautocomplete({..});
_

そして、後でカスタムautocompletesearchcompleteイベントにバインドします。

_$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});
_

例を参照してください： http://jsfiddle.net/andrewwhitaker/VBTGJ/

この質問/回答が注目を集めているので、これを達成するためのさらに別の方法でこの回答を更新すると思いました。このメソッドは、ページにoneオートコンプリートウィジェットしかない場合に最も役立ちます。この方法は、リモートまたはローカルソースを使用するオートコンプリートウィジェットに適用できます。

_var src = [...];

$("#auto").autocomplete({
    source: function (request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);

        if (!results.length) {
            $("#no-results").text("No results found!");
        } else {
            $("#no-results").empty();
        }

        response(results);
    }
});
_

ifの中には、結果が検出されないときに実行するカスタムロジックを配置する場所があります。

例：http://jsfiddle.net/qz29K/

リモートデータソースを使用している場合は、次のように言います。

_$("#auto").autocomplete({
    source: "my_remote_src"
});
_

次に、コードを変更して、AJAXを自分で呼び出して、0の結果が返されることを検出できるようにする必要があります。

_$("#auto").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "my_remote_src", 
            data: request,
            success: function (data) {
                response(data);
                if (data.length === 0) {
                    // Do logic for empty result.
                }
            },
            error: function () {
                response([]);
            }
        });
    }
});
_
195
Andrew Whitaker

誰もが簡単な組み込みの方法を無視しているようです：messages：noResultsイベントを使用してください。

$('#field_name').autocomplete({
  source: $('#field_name').data('autocomplete-source'),
  messages: {
    noResults: function(count) {
      console.log("There were no matches.")
    },
    results: function(count) {
      console.log("There were " + count + " matches")
    }
  }
})

この機能は、jQuery 1.9で実験的な機能として追加されました（ ここで説明 ）。 2017年7月の時点では、まだ APIに文書化されています です。

5
Mike Bethany

リモートデータソース（MySQLデータベースなど、 [〜＃〜] php [〜＃〜] 、またはサーバー側のものを使用している場合）クライアントに返すデータがない場合（ハッキングやコアコードUIコードの変更を必要とせずに）状況を処理するためのその他のいくつかのクリーンな方法があります。

PHPとMySQLをリモートデータソースおよびJSONとして使用して、それらの間で情報を受け渡します。私の場合、JSONリクエストがサーバーなので、データがないときにサーバー側から空のJSON応答を返し、そこからクライアント応答を処理する方が簡単だとわかりました。

if (preg_match("/^[a-zA-Z0-9_]*$/", $_GET['callback'])) {//sanitize callback name
    $callback = $_GET['callback'];
} else { die(); }

die($callback . "([])");

別の方法は、サーバーからの応答でフラグを返し、一致するデータがないことを示し、応答内のフラグの存在（または値）に基づいてクライアント側でアクションを実行することです。この場合、サーバーの応答は次のようになります。

die($callback . "([{'nodata':true}])");

次に、このフラグに基づいて、クライアント側でアクションを実行できます。

$.getJSON('response.php?callback=?', request, function (response) {
    if (typeof response[0].nodata !== 'undefined' && response[0].nodata === true) {
        alert('No data to display!');
    } else {
        //Do whatever needs to be done in the event that there is actually data to display.
    }
});
2
Zappa

オートコンプリート要素を初期化した後、メッセージ表示にデフォルトのスパンを使用する場合は、メッセージオプションを設定します。

$(<yourselector>).autocomplete('option', 'messages', {
    noResults: 'myKewlMessage',
    results: function( amount ) {
        return amount + ( amount > 1 ? " results were" : " result was" ) + " found.";
    }
});

[〜＃〜] note [〜＃〜]：これは実験的なAPIです（文書化されていません）。 jQuery UI開発者は、文字列操作と国際化のための完全なソリューションをまだ調査中です。

2
Guntram

カスタムコールバックのsourceパラメーターがnotで十分な理由がわかりません。

$("#autocomplete").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://example.com/service.json",
            data: {
                q: this.term
            },
            success: function (data, textStatus, jqXHR) {
                // data would be an array containing 0 or more items
                console.log("[SUCCESS] search returned " + data.length + " item(s)");
                response(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // triggered when AJAX failed because of, for example, malformed JSON
                console.log("[FAILURE] search returned error");
                response([]);
            }
        });
    }
});
0
Salman A

数時間プレイした後、jQueryのオートコンプリートでNo match foundを表示するトリックを見つけました。上記のコードを見て、divを追加してください。私の場合は#ulNoMatchとそのスタイルをdisplap:noneに設定します。コールバック成功メソッドで、返された配列にlength == 0があるかどうかを確認します。それがそこにあるなら、あなたはあなたの一日を作りました！ :)

<pre><div class="ui-widget1" style="width: auto;">
    <asp:TextBox ID="txtSearch" class="tb" runat="server" Width="150px">
    </asp:TextBox>
    <ul id="ulNoMatch" class="ui-autocomplete ui-menu ui-widget1 ui-widget1-content ui-corner-all"
        role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16;
        display: none; width: 150px;">
        <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">No Matches
            Found</a></li>
    </ul>
    </div><pre>
<b>
<b>

Enter code here

<script>
    $(function () {
        $("input[id$='txtSearch']").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "splah.aspx/GetByName",
                    data: "{ 'strName': '" + request.term.trim() + "' }",
                    dataType: "json",
                    type: "POST",
                    //cacheLength: 1,
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) {
                        return data; },
                    success: function (data) {
                        var found = $.map(data.d, function (item) {
                            return {
                                value: item.Name,
                                id: item.id
                            }
                         });

                         if (found.length == 0)
                         {
                             $("#ulNoMatch").show();
                         }
                         else
                         {
                             $("#ulNoMatch").hide();
                         }
                         response(found);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function (event, ui) {
                $("input[id$='txtSearch']").val(ui.item.label);
                $("input[id$='txtID']").val(ui.item.id);
                return false;
            },
            minLength: 1
        });
    });
</script>
0
Umar Malik