ホームページ >ウェブフロントエンド >jsチュートリアル >js はリアルタイム検索と検索機能を使用したドロップダウン ボックスのリアルタイム マッチングを実装します_javascript スキル
js はリアルタイム検索と検索機能を使用したドロップダウン ボックスのリアルタイム マッチングを実装します_javascript スキル
- WBOYオリジナル
- 2016-05-16 17:17:211887ブラウズ
1. 選択入力ボックスに各内容を入力すると、その内容に一致する選択肢が選択肢内で検索され、その選択肢の前の選択肢に表示されます。
2. キーアップ時に各入力の内容を取得して関数をトリガーする方法。
質問: 選択タグにコンテンツを入力できますか? (解決策: 選択可能な入力ドロップダウン リスト ボックスを備えた別の記事)
3. 入力ボックスの内容を取得するにはどうすればよいですか? (解決するには、onkeyup 時間トリガー関数を入力ボックスに追加し、js を使用して取得します)
4. マッチング方法は? (解決策)
4.1 すべてのオプションの内容を取得するにはどうすればよいですか? (解決策)
コードをコピー コードは次のとおりです。
function getSelectText()
{
//すべての select タグを取得します
var object = document.getElementsByTagName('select');
//html には select タグが 1 つしかないため、name = で表されるタグです"aabb"
var obj = object[0]
//alert(obj.length)
//alert(obj[0]);すべてのオプション
var allText;
for(i=0;i
allText = obj[i].innerText ',';オプション オブジェクトの innerText プロパティを通じてオプション テキストを取得します
}
return allText;
}
コードをコピー コードは次のとおりです。
var allText = getSelectText() ;
//alert(allText);
// 各オプションの内容を分割します
var eachOptin = new Array(); //Character分割
4.3 js でマッチングするにはどうすればよいですか?
//alert(allText);
// 各オプションの内容を分割します
var eachOptin = new Array(); //Character分割
4.3 js でマッチングするにはどうすればよいですか?
コードをコピー コードは次のとおりです:
//オプションの内容、return 最初に一致した位置 (0 以上)、一致しない場合は -1 を返す var flag = eachOptin[i].indexOf(shuru) ;
5. マッチング方法 選択肢の内容は選択肢の前に表示されますか？ (オプションのインデックス番号を変更する) (解決策)
方法: 一致するオプションが見つかったら、最初のオプションを選択の最後に追加し、最初の値を一致するオプションの値にリセットします。 、元のマッチングオプションを削除します
7. jsはselectタグの右側の三角形の機能を実装します（未解決、検索後、すべてのオプションが直接選択のために表示されます）
8.オプション 複数のオプションがある場合、トコジラミが表示されます。テストに注意して再修正してください。5. マッチング方法 選択肢の内容は選択肢の前に表示されますか？ (オプションのインデックス番号を変更する) (解決策)
方法: 一致するオプションが見つかったら、最初のオプションを選択の最後に追加し、最初の値を一致するオプションの値にリセットします。 、元のマッチングオプションを削除します
7. jsはselectタグの右側の三角形の機能を実装します（未解決、検索後、すべてのオプションが直接選択のために表示されます）
コードは次のとおりです。
コードをコピーします
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。