IFRAME を使った一覧選択

　以下にある動作の確認を参照してみてください。IFRAME を使った一覧選択の動作確認できます。

作成の方法

　入力項目がフォーカスされると選択肢が一覧表示されます。一覧表示には IFRAME を用いています。

　表示位置が親エレメントの左上端が(0,0)の位置になるように IFRAME などのエレメントを配置しています。
親エレメントにposition:relative;を、 IFRAME を用いるエレメントはposition:absolute;を指定します。ここではオーバーラップのdivエレメントに指定しています。 top、leftで位置を調整します。

　 IFRAME で表示される一覧は別に設けたページです。そのページにおいて、クリックで入力項目を補完するように選択肢にスクリプトを埋め込みます。 クリックすると選択肢は非表示になります。
　選択肢の1行ずつにスクリプトを設定してます。ここではTRエレメントに設定しています。

<tr onClick="parent.document.example_form.example_00.value=document.getElementsByName('list_data')[0].innerText;parent.document.getElementById('example_list_00').style.visibility='hidden';">

　XSLでは以下のように設定します。XMLファイルからtitleデータを読み込んでの方法です。

<xsl:for-each select='list/data'>
<xsl:element name='tr'>

	<xsl:attribute name='name'>data_line</xsl:attribute>

	<xsl:attribute name='onClick'>

		parent.document.example_form.example_00.value="<xsl:value-of select='title'/>";

		parent.document.getElementById("example_list_00").style.visibility="hidden";

	</xsl:attribute>

...

　選択肢は最初は全てCSSで非表示にしています。そして、入力項目がフォーカスされると該当する一覧を表示し、別の入力項目がフォーカスされると開いていた一覧を閉じて該当する一覧を表示します。

　外部ファイルから選択肢を取得する、例えばXMLデータを反映する場合に簡易作成できます。
　JavaScriptを使って選択肢を別ファイルから読み込む方法もあります。