0

誰かが私の不動産 Web サイトで特定の CITY を検索する場合、一致する cityID を .csv データベースから取得し、取得した cityID を http;//www.vendor などの検索パラメーターの 1 つとしてベンダー Web サイトに渡す必要があります。コム?都市ID=9999

cityID と cityName のリストは、myproperty.csv というファイルにあります。

以下は、私が現在持っている現在のhtmlコードです。

<form action="vendor.com" method="get" target="_blank">
<label>Please enter city name:-</label>
<input type="text" id="cityName" name="cityName">

<!-- Please help me to add some codes here -->

<input type="submit" value="Submit">
</form>

上記の目的を達成するためのコードを教えてください。私は答えを高低で検索しましたが、まだ何も機能しません。助けてください。ご協力いただきありがとうございます

ハフィズ

4

1 に答える 1

0

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>
于 2012-12-27T09:41:08.120 に答える