0

Jörn Zaefferer のjQuery Autocomplete プラグインを使用しています。データで問題なく動作します。OnChange 関数 (キー ストローク) から結果が返されない場合に「結果がありません」というエラー メッセージを表示して、機能をカスタマイズしようとしています。結果が表示されるのと同じdivにメッセージを表示したいので、入力に文字を入力すると、divは表示されたままになりますが、結果はメッセージに置き換えられます。スタイリングに凝ったものは何もなく、ただのプレーンテキストです。

メッセージを表示することはできますが、メッセージをそこに保持し、結果の表示に戻らないため (文字の一部を削除した場合)、機能が台無しになります。

機能の例は、カンタス航空の目的地オートコンプリート www.qantas.com.au/travel/airlines/home/au/en です。

アップデート

プラグインで機能を追加しました

function NoResults() {

        var wasVisible = select.visible();
        clearTimeout(timeout);
        stopLoading();
        var resultText = $('.ac_results').html();
        var errorMessage = "There are no results that match your request. Please try again.";
        //alert(resultText);
        if (resultText.indexOf(errorMessage) == -1) {
            $('.ac_results').append(errorMessage);
        }

};

次に、リクエスト機能で次のように変更しました

function request(term, success, failure) {

        if (!options.matchCase)
            term = term.toLowerCase();
        var data = cache.load(term); if (data && data.length) { success(term, data); }
        else if ((typeof options.url == "string") && (options.url.length > 0)) {
            var extraParams = { timestamp: +new Date() }; $.each(options.extraParams, function(key, param) { extraParams[key] = typeof param == "function" ? param() : param; });
            $.ajax({ mode: "abort", port: "autocomplete" + input.name, dataType: options.dataType, url: options.url, data: $.extend({ q: lastWord(term), limit: options.max }, extraParams),
                success: function(data) { var parsed = options.parse && options.parse(data) || parse(data); cache.add(term, parsed); success(term, parsed); }
            });
        }
        else {
            select.emptyList();
            // failure(term);
            NoResults();
        }
};

私が今残した唯一の問題は、エラーメッセージが表示され、結果を再び返すように入力を変更すると、エラーメッセージがまだ結果リストの一番下にあることです.

4

1 に答える 1

0

あなたの質問に対する解決策を見つけました。「parse」オプションを使用すると、ドキュメントにこのオプションが見つかりません。ソースコードをチェックして、このオプションを見つけました（行番号373を確認してください）。

このプラグインは次のように使用できます。

$("#suggest4").autocomplete('http://jquery.bassistance.de/autocomplete/demo/search.php', {
  width: 300,
  multiple: true,
  matchContains: true,
  formatItem: formatItem,
  formatResult: formatResult,
  parse: function(data){
    var parsed = [];
    var rows = data.split("\n");
    for (var i=0; i < rows.length; i++) {
      var row = $.trim(rows[i]);
      if (row) {
        row = row.split("|");
        parsed[parsed.length] = {
          data: row,
          value: row[0],
          result: formatResult(row, row[0]) || row[0]
        };
      }
    }

    if (parsed.length == 0) {
      row = ['no results', null];
      parsed[parsed.length] = {
        data: row,
        value: row[0],
        result: formatResult(row, row[0]) || row[0]
      };
    }
    return parsed;
  }
});

しかし、最善の解決策は、Autocomplete プラグインを変更して、"noResults" のようなイベントを追加することだと思います。このイベントを追加するように作者に提案できます:-)

于 2009-11-09T06:43:40.690 に答える