javascript - PHP Ajax 自动完成多个字段

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

如果服务器上有纬度和经度:通过服务器响应返回纬度和经度，并将它们作为数据属性绑定(bind)到自动完成项。

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

另一种方法是使用 google geocode 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^