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

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




コードをコピーします

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

<script> <br>{ <br>/ /入力ボックスの内容を取得します <br>var shuru = document.getElementById('ccdd').value; <br>var object = document.getElementsByTagName('select'); <br>var obj = object[0]; <br>//入力内容が空の場合、すべてのオプションは <br>if(shuru!= '') <br>{ <br>//alert(shuru)// オプションの取得 <br>; var allText = getSelectText(); <br>//alert(allText); <br>//各オプションの内容は分割されます <br>var eachOptin = new Array(); <br> eachOptin=allText.split(" ,"); //文字分割<br>var f = 1; <br>for (i=1;i<eachoptin.length-1>{ <br>/ /alert(eachOptin[i] ); <br>//オプション内容に入力内容があれば最初に一致した位置(0以上)を返し、一致しない場合は-1を返す<br>var flag = eachOptin[i] .indexOf(shuru) ; <br>if(flag >=0) <br>{ <br>//alert(i); <br>//最後に表示されるインデックス f のオプションを再度追加します>obj.options.add(new Option(obj[i].innerText,obj[f].value)); <br>//条件を満たすように番号 f のオプションを再割り当てします。最初のオプション <br>obj.options[ f]=new Option(eachOptin[i],eachOptin[i]); <br>//最初に存在する対象となるオプション <br>obj.remove(i ) <br>} <br> } <br>} <br>} <br>function getSelectText() <br>{ <br>//すべての選択タグを取得します <br>var object = document .getElementsByTagName('select'); HTML には select タグが 1 つだけあり、これは name = "aabb" <br>var obj = object[0]; <br>//alert( obj.length>//alert) で表されるタグです。 (obj[0]); <br>//すべてのオプションの値を保存します<br>var allText; <br>{ <br> //alert(obj[i].index);//オプションのインデックス番号を取得します<br>//alert(obj[i].value);//オプションの値の値を取得します<br>allText = obj[ i].innerText ','; // 重要なのは、オプション オブジェクトの innerText プロパティを通じてオプション テキストを取得することです<br>} <br></script> >



onChange= "javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
< "" style="color:#c2c2c2;"> -- 選択してください --
北京
上海
広州
上123
蘇州



< ;/span>




上記のコードの結果は次のとおりです。 >