jqueryのselect2で検索欄の文字が消せない

業務で困っているためご存知の方がいらっしゃればご教授ください。

バージョンなどの細かい条件がお伝えできないため
参考程度で構いません。アタリがつけられればと思っています。

開発環境
windows
classic asp(vbscript)
javascript(jquery)

経緯
html
→selectタグでリスト作成

asp
→oracle接続→人名データ取得→optionタグでループで全件表示

js
→jqueryをインポートし、select2メソッドで実装

困っていること
リスト内へのデータの反映とselect2による検索欄も正常に表示されましたが、検索時に入力した文字が消せない事象が発生しています。

詳細
半角文字→削除不可
全角文字→enter押下前削除可、押下後削除不可
全選択から文字入力(上書き？)可能
検索機能は正常

jqueryのファイルはダウンロード後
相対パスで呼び出しており、記述の順番も確認済み。
他システムでも同様のファイルを使用しており、可能性としては低そう

何かイベントが発生しないと文字が消せないなどの条件があるのでしょうか、、

よろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2024/09/26 23:09

こんばんは

>select2メソッドで実装～～
説明がありませんけれど、雰囲気的にこれ（↓）を使っているという事でしょうか？
https://select2.org/

＞検索時に入力した文字が消せない事象が発生しています。
こちらもよくわかりませんけれど、selectボックス内の文字を消したいってことでしょうか？

ユーザーのUIとして消したいのか、スクリプトから消したいのかも不明ですけれど・・・

◇ 前者の場合
通常のselectタグでも選択内容を消すことはできませんよね？
Select2を使ったことはありませんけれど、同様の理由で、Select2でも消すことは考慮していないものと推測されます。
空白表示をしたければ、optionで空白を用意しておいて、それを選択する仕組みにしておけば可能でしょう。
ただし、空白文字列は検索はしてくれないので、直接選択する必要があります。
（Multi-selectの場合は、Deleteキーでもクリアできるようですが・・）


◇ 後者の場合
スクリプトからであれば消すことは可能です。
通常のselect要素であれば
　select要素.value = '';　　または
　select要素..selectedIndex = -1;
とすることで可能です。

Select2の場合は、実際に見えているのはselect要素ではなく、span要素なので、そちらに対して
　span要素.textContent = '';
を実行すれば表示上消すことが可能です。