7

select2 ドロップダウンで、ユーザーが入力した入力に一致するオプションがない場合にデフォルトのオプションを表示するにはどうすればよいですか?

$("something").select2({
  formatNoMatches: function(term) {
    //return a search choice
  }
});

select2 ドキュメントまたは Stack Overflow 内で、この目的の機能に実際に一致するものを見つけることができませんでした。

編集 私はこれに近づいています

$("something").select2({
  formatNoMatches: function(term) {
    return "<div class='select2-result-label'><span class='select2-match'></span>Other</div>"
  }
});

しかし、これは非常にハックであり、クリックすることもできません。

4

7 に答える 7

9

@vararisの回答を補足するには：

要素にアタッチされた Select2<select>ではカスタムcreateSearchChoiceもquery関数も許可されないため、オプション要素を手動で追加する必要があります (.pop結果セットから簡単に除外できるように要素の最後のオプションとして追加します)。

<select>
  ...
  <option value="0">Other</option>
</select>

matcher次に、この「その他」オプションが常に一致するようにカスタム関数を渡します。

注: Select2 3.4+ は、現在ドキュメントに示されているものとは異なるデフォルトのマッチャーstripDiacriticsを使用します。この新しいマッチャーには、関数への呼び出しが含まれているため、たとえばa一致áします。したがってmatcher、ページに含まれる Select2 バージョンに付属するデフォルトを適用して、デフォルトのマッチング アルゴリズムを「その他」オプション以外のオプションに適用します。

matcher: function(term, text) {
  return text==='Other' || $.fn.select2.defaults.matcher.apply(this, arguments);
},

最後に、「その他」の結果 (最初は常に結果セットにある) 以外の結果がある場合は、結果セットから「その他」オプションを削除する必要があります。

sortResults: function(results) {
  if (results.length > 1) results.pop();
  return results;
}

デモ

于 2013-07-30T22:23:17.723 に答える
1

マッチャーを変更することで解決しました。

$('#activity_log_industry_name').select2
  matcher: (term, text) ->
    if text=="Other"
      return true
    text.toUpperCase().indexOf(term.toUpperCase())>=0

(これは coffeescript にあります。) 唯一の問題は、どの検索でも "Other" がポップアップすることですが、これはsortResults関数を変更することで簡単に解決できます。

于 2013-07-30T17:55:21.267 に答える
0

この回答をstackoverflowで試してください

createSearchChoice: function (term) {
  return { id: term, text: term };
}
于 2013-11-08T16:32:57.073 に答える
0

次のコードを使用して、一致するものが見つからない場合にメッセージを「その他」として表示します

$("select").select2({ 
formatNoMatches   :    function(term) {       
    return   "Other";
}
});
于 2015-09-07T12:46:43.260 に答える
0

バージョン 4 以降の Select2 では、マッチャーは次のように渡す必要があります。

$("something").select2({
    matcher: function(params, data) {
        if (data.id === "0") { // <-- option value of "Other", always appears in results
            return data;
        } else {
            return $.fn.select2.defaults.defaults.matcher.apply(this, arguments);
        }
    },
});

「その他」オプションは、次のようにオプション リストに追加する必要があります。

<select>
  ...
  <option value="0">Other</option>
</select>
于 2019-03-21T13:12:26.963 に答える