I'm trying to use a live API search to auto-suggest values for a text box. As it stands I'm using a PHP search page to query the companies house API and it's returning the following values;
{"items":
"CAPI LTD":"08672927",
"CAPI CONSULTANTS LIMITED":"09806330",
"CAPI G LTD":"10873948",
"CAPI GROUP LIMITED":"10990634",
"CAPIS HOLDING LIMITED":"10003819",
"CAPI VENTURES LTD":"08553864",
"CAPI MANAGEMENT LTD":"09311575",
"CAPI LIFE LIMITED":"08632621",
"J & L CAPIS LIMITED":"04588481",
"OPULENCE CAPI LIMITED":"SC588630",
"CAPO DEI CAPI LIMITED":"09799325",
"CAPO DEI CAPI LIMITED":"07683458",
"AQUELA GLOBAL TRADING & MARKETING LIMITED":"10720939",
"BEAUPRE GARBEAU LIMITED":"10776401",
"BRIAN PETERS LIMITED":"02100958",
"CAPIA LTD":"09343893",
"CAPIAN LIMITED":"01807368",
"CAPIATIN CONTRACTING LTD":"10621303",
"CAPIBARRA LIMITED":"10925681",
"CAPIC LTD.":"04502064",
}
the Javascript that I'm using to autofill the imput box is as follows:
$(document).ready(function(){
$('.companyName input').autocomplete({
source: function (request, response) {
$.getJSON("http://internalserver/php/cal/search.php?company=capital", function (data) {
response($.map(data, function (value, key) {
return {
label: value,
value: key
};
}));
});
},
minLength: 2,
delay: 100
});
});
The input box has been given a class of "companyName".
I would expect that - after two keys have been entered in the field - the auto-suggest should then appear below with the company names that match the terms. However what's happening is that the input box seems to be getting no values. I'm also not getting any console errors at all which is frustrating.
Anyone know where I'm going wrong here?
I have achieved an answer.
The format that the Search.php script outputs in the working version is this:
[{"label":"BSKYB PLC","value":"BSKYB PLC","address":"The Hub, Grant Way, Isleworth, Middlesex, England","id":"09158139"}, {"label":"BSKYB GUERNSEY LIMITED","value":"BSKYB GUERNSEY LIMITED","address":"1 Le Marchant Street, St Peter Port, Guernsey, GY1 4HP","id":"FC029076"}, {"label":"BSKYB GUERNSEY LIMITED","value":"BSKYB GUERNSEY LIMITED","address":"Sky 8 Grant Way, Isleworth, TW7 5QD","id":"BR010528"}, {"label":"BSKYB GROUP PLC","value":"BSKYB GROUP PLC","address":"The Hub, Grant Way, Isleworth, Middlesex, England, TW7 5QD","id":"09158652"}, {"label":"SKY GUARANTEE INVESTMENTS LIMITED","value":"SKY GUARANTEE INVESTMENTS LIMITED","address":"Grant Way, Isleworth, TW7 5QD","id":"05376199"}, {"label":"SKY HISTORY LIMITED","value":"SKY HISTORY LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"03071747"}, {"label":"SKY LLU ASSETS LIMITED","value":"SKY LLU ASSETS LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"03137522"}, {"label":"SKY OPERATIONAL FINANCE LIMITED","value":"SKY OPERATIONAL FINANCE LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"02906994"}, {"label":"SKY PUBLICATIONS LIMITED","value":"SKY PUBLICATIONS LIMITED","address":"Grant Way, Isleworth, Middlsex, TW7 5QD","id":"03071751"}, {"label":"SKY SNA LIMITED","value":"SKY SNA LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"07418281"}, {"label":"SKY SNI LIMITED","value":"SKY SNI LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"08458834"}, {"label":"SKY SNI OPERATIONS LIMITED","value":"SKY SNI OPERATIONS LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"08522753"}, {"label":"SKY TELECOMMUNICATIONS LIMITED","value":"SKY TELECOMMUNICATIONS LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"05349163"}, {"label":"SKY COMEDY LIMITED","value":"SKY COMEDY LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"03079609"}, {"label":"SKY HEALTHCARE SCHEME 2 LIMITED","value":"SKY HEALTHCARE SCHEME 2 LIMITED","address":"Grant Way, Isleworth, Middlesex, United Kingdom, TW7 5QD","id":"08553886"}, {"label":"SKY GROUP FINANCE PLC","value":"SKY GROUP FINANCE PLC","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"05576975"}, {"label":"SKY TELECOMMUNICATIONS SERVICES LIMITED","value":"SKY TELECOMMUNICATIONS SERVICES LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"02883980"}, {"label":"BSKYB HEALTHCARE SCHEME LIMITED","value":"BSKYB HEALTHCARE SCHEME LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"02766412"}, {"label":"BSKYB INVESTMENTS LIMITED","value":"BSKYB INVESTMENTS LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"05374700"}, {"label":"BSKYB B LIMITED","value":"BSKYB B LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"03886899"}, {"label":"BSKYB CRICKETER LIMITED","value":"BSKYB CRICKETER LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"04368567"}, {"label":"WORLD RECRUITMENT WORLDWIDE LTD.","value":"WORLD RECRUITMENT WORLDWIDE LTD.","address":"3 Greenacres Drive, Boston, Lincolnshire, PE21 7LJ","id":"07705799"}, {"label":"PICNIC LIMITED","value":"PICNIC LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"05348872"}, {"label":"SKY DIGITAL SUPPLIES LIMITED","value":"SKY DIGITAL SUPPLIES LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"05349192"}, {"label":"SKY VENTURES LIMITED","value":"SKY VENTURES LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"03092549"}]
This is achieved in the PHP script by the following nugget:
$json = json_decode($resp, true);
//print the values in the correct format for out JSON reading JQuery script on the form
print "[";
$j=count($json["items"]);
for ($say=0 ; $say < $j; $say++ )
{
$comma = ($say<$j-1) ? ", " : "";
print "{\"label\":\"";
print $json["items"][$say]["title"];
print "\",\"value\":\"";
print $json["items"][$say]["title"];
print "\",\"address\":\"";
print $json["items"][$say]["address_snippet"];
print "\",\"id\":\"";
print $json["items"][$say]["company_number"];
print "\"}";
print $comma;
}
print "]";
and the code that looks for it is this:
$(document).ready(function(){
$( ".companyName input" ).keyup(function(){
$( ".companyName input" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "http://intenral_server_here/php/cal/search.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 5,
select: function( event, ui ) {
$('.companyNumber input').val(ui.item.id);
$('.hqAddress input').val(ui.item.address);
}
}
);