入力補完用データリストの内容を、配列で指定

HTMLの入力補完用データリスト要素の内容を、PHPの配列で指定する方法。

サンプル

PHPコード

<?php

$array = array( "入力候補1", "入力候補2", "入力候補3", "入力候補4", "入力候補5" );
$sampleDatalist = "<input type=\"text\" name=\"inputName\" autocomplete=\"on\" list=\"datalistId\">\n";
$sampleDatalist .= "<datalist id=\"datalistId\">\n";
for ( $i = 0; $i < count( $array ); $i++ ) {
    $sampleDatalist .= "\t<option value=\"{$array[$i]}\">{$array[$i]}</option>\n";
}
$sampleDatalist .= "</datalist>\n";
echo "{$sampleDatalist}";

?>

↓↓↓出力結果↓↓↓

出力結果

HTMLコード

<input name="inputName" autocomplete="on" list="datalistId" type="text">
<datalist id="datalistId">
    <option value="入力候補1">入力候補1</option>
    <option value="入力候補2">入力候補2</option>
    <option value="入力候補3">入力候補3</option>
    <option value="入力候補4">入力候補4</option>
    <option value="入力候補5">入力候補5</option>
</datalist>

ブラウザ表示例

スポンサード リンク

カテゴリー: PHP, フォーム, 逆引き, 配列 パーマリンク