Question

以下代码可以正常工作以自动填充位置，但是当我点击列表时，如何填充其他2个带有纬度和经度的文本框？

PHP

$pdo = connect();
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM locations WHERE location LIKE (:keyword) AND state='QLD' AND latitude !=0 AND longitude !=0 ORDER BY postcode ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
  $country_name = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['location']. ' ' .$rs['state']. ' ' .$rs['postcode']);
  echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['location']).'\')">'.$country_name.'</li>';
}

HTML

            <input type="text" id="country_id" onkeyup="autocomplet()">
            <input type="text" id="latitude">
            <input type="text" id="longitude">

            <ul id="country_list_id"></ul>

的JavaScript

function autocomplet() {
    var min_length = 0;
    var keyword = $('#country_id').val();
    if (keyword.length >= min_length) {
        $.ajax({
            url: 'ajax_refresh.php',
            type: 'POST',
            data: {keyword:keyword},
            //data2: {keyword2:keyword2},
            success:function(data){
                $('#country_list_id').show();
                $('#country_list_id').html(data);
                //$('#latitude').html(data2);
            }
        });
    } else {
        $('#country_list_id').hide();
    }
}
    function set_item(item) {
    $('#country_id').val(item);
    $('#country_list_id').hide();
}

Answer 1

如果服务器上有纬度和经度：使用服务器响应返回纬度和经度，并将它们作为数据属性绑定到自动完成项目。

选择时，使用这些值填充其他输入。

另一种方法是使用谷歌地理编码JS api来做这个客户端，它对客户端实现没有限制。这可以在onclick上完成并且是异步的，因此您需要一个插入返回信息的回调。

编辑：

所以你的输出看起来像

echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['location']).'\')" data-lat="<?php echo $lat; ?>" data-lng="<?php echo $lng; ?>">'.$country_name.'</li>';

在set_item（）函数中你需要像

这样的东西

var $this = $(this),
    lng = $this.data('lng'),
    lat = $this.data('lat');

$('#lat').val(lat); 
$('#lng').val(lng);

如果您使用的是jQuery ^

Answer 2

如果你点击li，项目应该是＆＃34; LAT，LNG＆＃34;对？然后你的功能应该是

function set_item(item) {
    var coordinates = item.split(",");
    $('#latitude').val(coordinates[0]);
    $('#longitude').val(coordinates[1]);
    $('#country_id').val(item);
    $('#country_list_id').hide();
}

PHP Ajax自动完成多个字段

2 个答案: