前置きというか言い訳というか
自分が知らなかっただけなんですが、ググっても良さそうな記事も見つけられなかったので、備忘録を兼ねて。
やりたいこと
Webシステムで、例えば備考ようの定型文があるとして、
- 定型文から選択する（入力の簡易性のため）
- 自由入力をする（入力の自由性のため）
の両方を実現させたい。
結論
<input type="textbox" list="fuga">と<datalist id="fuga">を使う。
サンプルソース（要点のみ）
hoge.aspx
<asp:TextBox ID="txtBiko" runat="server"></asp:TextBox>
<datalist runat="server" id="dlBiko"></datalist>
hoge.aspx.vb
' DB等から dtTbl As DataTable にデータを取って来ている前提で・・・
Dim strOption As String = ""
For Each dRow As DataRow In dtTbl.Rows
strOption += "<option>" + dRow("VALUE1").ToString + "</option>"
Next
Me.dlBiko.InnerHtml = strOption
Me.txtBiko.Attributes("list") = Me.dlBiko.ClientID
Me.dlBiko.ClientIDとしているのは、asp.netのマスター画面を使っていて、
クライアントIDとサーバー側IDが同一のものにならないので、その対策です。
結果
ちょっと画像をつけるのが面倒なのでサボりますが、
テキストボックスにカーソルが当たると、選択項目の一覧が直下（または直上）に
ずらっと出てきて選ぶことができるようになりました。
テキストボックスなので、文字を削除したり自由に入力したりもできます。
ちなみに厳密に言うと
「入力文字列を条件として選択項目を 前方一致 部分一致で絞り込んだ結果を
選択可能な一覧として表示する」
という仕組みです。
そのため、テキストボックスが空欄であればすべての選択項目の一覧から
選ぶことができますが、
すでに入力がある場合はある程度絞り込まれた一覧から選択することとなります。