ドロップダウンで選択できるselectを入力できます
2672 ワード
一般的にselectドロップダウンボックスは選択しかできず、内容を入力することはできません.ドロップダウン・ボックスに選択する情報がない場合や、ドロップダウン・オプションが特に多い場合、selectをtextに変更して、ユーザーが希望する内容を入力できるようにするとともに、入力時にキーワードを含む項目もリストして、迅速に選択することができます.
ダウンロードソースの表示
ここでは、jQueryベースのドロップダウン・ボックス・プラグインを例として共有します.これにより、ユーザーがコンテンツを入力できるようになります.また、ドロップダウン・オプションでは、関連するオプションがタイムリーに一致し、キーボード操作がサポートされ、htmlオプションのコンテンツもサポートされます.もちろん、ドロップダウン・プロセスにアニメーション効果をもたらすこともできます.使い方を見てみましょう.
HTML構造
次は基本的なselectドロップダウンボックスです.
さらにjQueryライブラリとjqueryをロードする必要がある.editable-select.jsファイルは、ソースダウンロードパッケージにすでにあります.
jQuery
従来のドロップダウンボックスが入力機能のあるドロップダウンボックスになるのは、以下のコードだけです.
実はプラグインコードをよく見ると、著者は既存のselectを処理し、入力フォームtextとリストulになったことがわかります.これでtextは入力でき、ドロップダウンオプションはulパネルで、ul内のオプションは任意のhtmlコードを追加できます.demoに例があります.その後、CSSおよびjsテクノロジーを使用することで、ドロップダウン・ポップアップ、入力検索マッチング機能を実現できます.
オプションの設定
filter:フィルタリング、すなわち、コンテンツを入力すると、ドロップダウン・オプションが入力した文字に一致し、中国語、true/false、デフォルトtrueをサポートします.
effects:アニメーション効果、ドロップダウン選択ボックスのポップアップがトリガーされたときのドロップダウンボックスには遷移効果が表示され、default、slide、fadeの3つの値があり、デフォルトはdefaultです.
duration:ドロップダウン・オプション・ボックスに表示される遷移アニメーションの速度は、fast、slow、および数(ミリ秒)で、デフォルトはfastです.
≪イベント｜Events｜ldap≫
onCreate:入力時にトリガーされます.
onShow:ドロップダウン時にトリガーされます.
onHide:ドロップダウンボックスが非表示の場合にトリガーされます.
onSelect:ドロップダウンボックスのオプションが選択されている場合にトリガーされます.
イベント呼び出し方法:
また、キーボード方向キー、リターンキー、Tabキー、Escキーの操作もサポートされています.
jQuery Editable Selectプロジェクト公式サイトアドレス:https://github.com/indrimuska/jquery-editable-select
テキストリンク:http://www.helloweba.com/view-blog-348.html
転載先:https://www.cnblogs.com/leohui/p/654d.html
ダウンロードソースの表示
ここでは、jQueryベースのドロップダウン・ボックス・プラグインを例として共有します.これにより、ユーザーがコンテンツを入力できるようになります.また、ドロップダウン・オプションでは、関連するオプションがタイムリーに一致し、キーボード操作がサポートされ、htmlオプションのコンテンツもサポートされます.もちろん、ドロップダウン・プロセスにアニメーション効果をもたらすこともできます.使い方を見てみましょう.
HTML構造
次は基本的なselectドロップダウンボックスです.
さらにjQueryライブラリとjqueryをロードする必要がある.editable-select.jsファイルは、ソースダウンロードパッケージにすでにあります.
jQuery
従来のドロップダウンボックスが入力機能のあるドロップダウンボックスになるのは、以下のコードだけです.
$('#editable-select').editableSelect({
effects: 'slide'
});
実はプラグインコードをよく見ると、著者は既存のselectを処理し、入力フォームtextとリストulになったことがわかります.これでtextは入力でき、ドロップダウンオプションはulパネルで、ul内のオプションは任意のhtmlコードを追加できます.demoに例があります.その後、CSSおよびjsテクノロジーを使用することで、ドロップダウン・ポップアップ、入力検索マッチング機能を実現できます.
オプションの設定
filter:フィルタリング、すなわち、コンテンツを入力すると、ドロップダウン・オプションが入力した文字に一致し、中国語、true/false、デフォルトtrueをサポートします.
effects:アニメーション効果、ドロップダウン選択ボックスのポップアップがトリガーされたときのドロップダウンボックスには遷移効果が表示され、default、slide、fadeの3つの値があり、デフォルトはdefaultです.
duration:ドロップダウン・オプション・ボックスに表示される遷移アニメーションの速度は、fast、slow、および数(ミリ秒)で、デフォルトはfastです.
≪イベント｜Events｜ldap≫
onCreate:入力時にトリガーされます.
onShow:ドロップダウン時にトリガーされます.
onHide:ドロップダウンボックスが非表示の場合にトリガーされます.
onSelect:ドロップダウンボックスのオプションが選択されている場合にトリガーされます.
イベント呼び出し方法:
$('#editable-select').editableSelect({
onSelect: function (element) {
alert("Selected!");
}
});
また、キーボード方向キー、リターンキー、Tabキー、Escキーの操作もサポートされています.
jQuery Editable Selectプロジェクト公式サイトアドレス:https://github.com/indrimuska/jquery-editable-select
テキストリンク:http://www.helloweba.com/view-blog-348.html
転載先:https://www.cnblogs.com/leohui/p/654d.html