PHP対応のWebサーバーでサイトを運営していると思いますね。その場合、PHPを使用してcsvファイルを1行ずつ読み取り、ユーザーが名前で都市を選択するためのhtmlドロップダウンを作成する1つの解決策があります。
また、サーバーでPHPを実行していない場合は、JavaScriptを使用して同じことを実行できます。必要な場合は、PHPではなくJavaScriptを使用してください。
これはおそらく最も簡単な解決策です。ドロップダウンの都市のリストではなくテキスト入力を使用する場合は、javascriptオートコンプリート関数を実装することでさらに進むことができます。
<form action="vendor.com" method="get" target="_blank">
Please select city:
<?php
// Set filename to read from
$csvFile = 'dummy.csv';
// Open file handle
$fp = fopen($csvFile, "r");
// In case the file don't exist, exit
if (!is_resource($fp)){
die("Cannot open $csvFile");
}
?>
<select name="city">
<?php //Let's read the csvfile line by line: ?>
<?php while($line = fgetcsv($fp)): ?>
<?php // Assuming that the csvfile's structure is the following: city_id,city_name, we create the dropdown options: ?>
<option value="<?php echo $line[0];?>"><?php echo $line[1]?></option>
<?php endwhile; ?>
</select>
<input type="submit" value="Submit">
</form>
次に、JavaScriptソリューションを示します(コードはJQUERYフレームワークを使用しているため、htmlタグに含める必要があります。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
一致した都市IDを含めるには、非表示のフォーム入力も必要になるため、フォームの拡張htmlマークアップは次のとおりです。
<form action="vendor.com" method="get" target="_blank" id="myForm">
Please enter city name:-
<input type="hidden" id="cityId" name="cityId">
<input type="text" id="cityName" name="cityName">
<input type="submit" value="Submit">
</form>
そしてその仕事をするためのあなたのJavaScript:
<script>
$(function(){
//Ajax call to get csv file contents
$.ajax({
type: "GET",
url: "dummy.csv",
dataType: "text",
success: function(data) {process_csv(data);}
});
//Event handler for form submission
$('#myForm').submit(function(){
//Let's get the value of the text input (city name)
var city_name = $('#cityName').val().toLowerCase();
//If the city name exists in our map, let's set the matched city id to the hidden input field called cityId
if (city_ids[city_name] > 0)
{
$('#cityId').val(city_ids[city_name]);
return true;
}
//Otherwise we can't find the city id in our database, so we can't post the form either...
alert('No such city name in database!');
return false;
});
});
//global variable to contain map of city names and id's
var city_ids = {};
//Function to parse csv file and set city map
function process_csv(text) {
var lines = text.split(/\r\n|\n/);
for (var i=0; i<lines.length; i++) {
var data = lines[i].split(',');
city_ids[data[1].toLowerCase()] = data[0];
}
}
</script>