Question

当有人在我的房地产网站中搜索特定的CITY时，我需要从.csv数据库中检索匹配的cityID，并将检索到的cityID作为搜索参数之一传递给我的供应商网站，例如http; // www .vendor.com？的 cityID = 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>

有人可以帮助我使用代码来实现上述目标吗？我已经搜索了高低的答案，但仍然无效。请帮忙。在此先感谢您的所有帮助

哈菲兹

Answer 1

我假设您在支持PHP的Web服务器上运行您的站点，不是吗？在这种情况下，这里有一个解决方案，它使用PHP逐行读取csv文件并创建一个html下拉列表，供用户按名称选择城市。

此外，如果您没有在服务器上运行PHP，则可以使用JavaScript执行相同的操作，如果您需要，而不是PHP让我知道。

这可能是最简单的解决方案，如果您想在下拉列表中使用文本输入而不是城市列表，则可以通过实施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>

从数据库中检索数字并将其作为搜索参数传递

1 个答案: