0

有一段漂亮的代码可以让用户开始输入地名，然后在您输入时提供建议的位置。

单击所需位置，然后将位置名称放入 div 框中。我怎样才能将选定的值作为变量 $location？

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; }
</style>

<script>
$(function () {
    function log(message) {
        $("<div>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
    }
    $("#city").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function (data) {
                    response($.map(data.geonames, function (item) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            log(ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
});
</script>

分区：

<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city" />
<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
4

1 回答 1

0

如果您想使用这段漂亮的代码来填写表单，用户可以提交什么并且 php 可以在服务器端使用，那么您必须将其设为表单并为 city 字段提供适当的名称：

<form method="post">

<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city" name="city" />
<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

<input type="submit" value="ok" />

</form>

<?php
if (!empty($_POST['city'])){
    print('<div>Latest submitted city was: '.$_POST['city'].'</div>');
}
?>

将修改后的内容（连同 javascript）放入 .php 文件中，并将浏览器指向该文件。

编辑：

另一种方法是使用 cookie :)

在您的代码中成功（）返回之前设置一个cookie：

success: function (data) {
    response($.map(data.geonames, function (item) {
        document.cookie = 'location=' + encodeURIComponent(item.name) + '; path=/';
        return {
            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
            value: item.name
        }
    }));
}

在您的 PHP 中，您可以将其解读为：

$location = $_COOKIE['location'];
print($location);
于 2013-09-01T13:23:29.897 回答