js はリアルタイム検索と検索機能を使用したドロップダウンボックスのリアルタイムマッチングを実装します

js はリアルタイム検索と検索機能を使用したドロップダウンボックスのリアルタイムマッチングを実装します_javascript スキル

WBOY

リリース： 2016-05-16 17:17:21

オリジナル

1852 人が閲覧しました

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; 
} 

 

4.2 js 分割文字列? (解決策)

コードをコピーコードは次のとおりです。

var allText = getSelectText() ; 
//alert(allText); 
// 各オプションの内容を分割します
var eachOptin = new Array(); //Character分割 

 
4.3 js でマッチングするにはどうすればよいですか? 

コードをコピーコードは次のとおりです:

//オプションの内容、return 最初に一致した位置 (0 以上)、一致しない場合は -1 を返す

var flag = eachOptin[i].indexOf(shuru) ; 
5. マッチング方法 選択肢の内容は選択肢の前に表示されますか？ (オプションのインデックス番号を変更する) (解決策) 
方法: 一致するオプションが見つかったら、最初のオプションを選択の最後に追加し、最初の値を一致するオプションの値にリセットします。 、元のマッチングオプションを削除します
7. jsはselectタグの右側の三角形の機能を実装します（未解決、検索後、すべてのオプションが直接選択のために表示されます）

8.オプション複数のオプションがある場合、トコジラミが表示されます。テストに注意して再修正してください。
コードは次のとおりです。

コードをコピーします

コードは次のとおりです: