2013-09-01 121 views
0

有一段漂亮的代码让用户开始输入地名,然后在您输入时提供建议的地点。我怎样才能把这个javascript的结果变成一个php变量?

单击所需的位置,然后将位置名称放入一个div框中。我怎样才能得到选定的值作为变量$位置?

<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:

<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> 
+1

缩进!缩进!缩进! –

+0

'我如何将选定的值作为变量$ location?'使用Ajax,就像您已经在脚本中使用一样。 –

回答

0

如果你想使用这个漂亮的代码段用于填充表单,哪些用户可以提交和PHP可以与服务器端的工作,那么你必须做出它的形式,给城市字段一个合适的名字:

<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); 
+0

哦,我会在完成我的晚餐后尝试这些,然后回复你 – user2527750

+0

太棒了!谢谢 – user2527750

相关问题