I have successfully setup a jQuery autocomplete call from a PHP file using JSON encode. I am successfully sending a KVP (Key Value Pair) array back to my HTML.
The issue I have, is that I wish to send part of the array items to one id="sometag1" and the other array items to id="sometag2" and id="sometag3".
Here is my javascript jquery code:
jQuery(document).ready(function(data) {
$('#edit-ad-location').autocomplete({
source: '/postcodes-latlong.php',
minLength: 2
});
});
The file "postcodes-latlong.php" contains the following code:
$rs = mysql_query('select p.ID, p.post_title, m.* FROM wp_posts p, wp_postmeta m WHERE p.ID = m.post_id AND p.post_title like "' . mysql_real_escape_string($_REQUEST['term']) . '%" AND meta_value is NOT NULL AND meta_value !="" AND (meta_key = "_aphs_FYN_latitude" OR meta_key = "_aphs_FYN_longitude") order by post_title limit 0,25', $dblink);
$this_row = "";
// loop through each postcode returned and format the response for jQuery
$data = array();
if ($rs && mysql_num_rows($rs)) {
while ($row = mysql_fetch_array($rs, MYSQL_ASSOC)) {
$new_row = $row['post_title'];
if ($new_row != $this_row) {
$data[] = array(
'id' => $row['meta_id'],
'label' => $row['post_title'],
'value' => $row['post_title']
);
}
if ($row['meta_key'] == "_aphs_FYN_latitude") {
$data[] = array_push($data, array(
'id' => 'geo-search-lat',
'value' => $row['meta_value']
));
}
if ($row['meta_key'] == "_aphs_FYN_longitude") {
$data[] = array_push($data, array(
'id' => 'geo-search-lng',
'value' => $row['meta_value']
));
}
$this_row = $row['post_title'];
}
}
// jQuery wants JSON data
echo json_encode($data);
flush();
And if the term 4503 is passed, we get the following returning array:
[{
"id": "384047",
"label": "4503, DAKABIN",
"value": "4503, DAKABIN"
}, {
"id": "geo-search-lat",
"value": "-27.226474"
}, 2, {
"id": "geo-search-lng",
"value": "152.980732"
}, 4, {
"id": "384062",
"label": "4503, GRIFFIN",
"value": "4503, GRIFFIN"
}, {
"id": "geo-search-lat",
"value": "-27.272654"
}, 7, {
"id": "geo-search-lng",
"value": "153.025911"
}, 9, {
"id": "384077",
"label": "4503, KALLANGUR",
"value": "4503, KALLANGUR"
}, {
"id": "geo-search-lat",
"value": "-27.25075"
}, 12, {
"id": "geo-search-lng",
"value": "152.992606"
}, 14, {
"id": "384092",
"label": "4503, KURWONGBAH",
"value": "4503, KURWONGBAH"
}, {
"id": "geo-search-lat",
"value": "-27.225828"
}, 17, {
"id": "geo-search-lng",
"value": "152.947552"
}, 19, {
"id": "384107",
"label": "4503, MURRUMBA DOWNS",
"value": "4503, MURRUMBA DOWNS"
}, {
"id": "geo-search-lat",
"value": "-27.258672"
}, 22, {
"id": "geo-search-lng",
"value": "153.006916"
}, 24, {
"id": "384122",
"label": "4503, WHITESIDE",
"value": "4503, WHITESIDE"
}, {
"id": "geo-search-lat",
"value": "-27.255364"
}, 27, {
"id": "geo-search-lng",
"value": "152.929729"
}, 29]
What I am trying to achieve, is send the ID, label and value (i.e. post_id, postcode, and suburb name) to the autocomplete field with id: "#edit-ad-location" and this works fine. But, I wish to send the latitude and longitude values to two other id tags #geo-search-lat and #geo-search-lng as shown below:
<div .... id="geo-search-lat" value=""> </div>
and
<div .... id="geo-search-lng" value=""> </div>
I have tried a number of approaches including converting the PHP JSON array to a Javascript array also trying to pass the JSON array as PHP array rather than JSON...
But I am struggling to glue all this together.
Is there a simple way to parse the array so that part of the KVP's go to one ID tag, and the rest goes to two other ID tags?
Something along the lines of:
jQuery(document).ready(function(data){
$('#edit-ad-location', '#geo-search-lat', '#geo-search-lng').autocomplete({source:'/postcodes-latlong.php', minLength:2});
});
But if I try this approach returns an error.
You can try sending australian postcodes to the following URL and test it for yourslef:
http://ift.tt/1ckqpn9
Where XXXX is any integer from 0 to 9999.
Any help is appreciated.
Cheers, Henry
