I am trying to use the Jquery ui autocomplete widget in a php page. I just started using jquery and I can't get the code below to work. The data source is page named CurrentOrganizations.php in the same directory. I am using the JSONP method. When I click on the field with autocomplete it does not show options.
I know that JSONP settings in the server is okay because if I just copy the examples in the autocomplete widget documentation everything works fine. Here is the code.
<script type="text/javascript">
$(function() {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}
$("#organization").autocomplete({
source: function(request, response) {
$.ajax({
url: "http://localhost/Business/CurrentOrganizations.php",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function(data) {
response($.map(data.organizations, function(item) {
return {
label: item.Organization + " - " + item.OrganizationID,
value: item.OrganizationID
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
log(ui.item ? ("organizations: " + 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>
And then in a form inside the body:
<label for="birds">Organization: </label>
<input id="organization" />
The code in CurrentOrganizations.php
<?php
$link = mysql_pconnect("localhost", "root", "root") or die("Could not connect");
mysql_select_db("business") or die("Could not select database");
$arr = array();
$rs = mysql_query("SELECT Organization, OrganizationID FROM Organization order by Organization ASC");
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo '{"organizations" : '.json_encode($arr).'}';
?>
If I just navigate to CurrentOrganizations.php it returns the following, which seems to be correct:
{"organizations" : [{"Organization":"Admiral Americas LLC","OrganizationID":"19"},{"Organization":"Allen Lund Company","OrganizationID":"36"},{"Organization":"Bellkor Realty Group Inc","OrganizationID":"15"},{"Organization":"Booz Allen Hamilton","OrganizationID":"9"},{"Organization":"Booz Allen Hamilton","OrganizationID":"5"},{"Organization":"Carpenter Co.","OrganizationID":"22"},{"Organization":"Century Distribution Systems, Inc.","OrganizationID":"4"},{"Organization":"Colonial Scientific","OrganizationID":"23"},{"Organization":"Come To Order, dba: Organized A to Z.com","OrganizationID":"30"},{"Organization":"Consultis of San Antonio","OrganizationID":"43"},{"Organization":"crownd consult","OrganizationID":"20"},{"Organization":"Dalima","OrganizationID":"29"},{"Organization":"Department of the Treasury","OrganizationID":"40"},{"Organization":"DionPhillips, LLC","OrganizationID":"11"},{"Organization":"DuPont","OrganizationID":"8"},{"Organization":"Food Lion, LLC","OrganizationID":"34"},{"Organization":"Gallium Technologies","OrganizationID":"27"},{"Organization":"Infilco Degremont","OrganizationID":"42"},{"Organization":"james river technical","OrganizationID":"39"},{"Organization":"Leading Edge Systems","OrganizationID":"10"},{"Organization":"LOGISTICS 2020, Inc","OrganizationID":"24"},{"Organization":"Mijo Logistics","OrganizationID":"13"},{"Organization":"MOCA Systems","OrganizationID":"32"},{"Organization":"Monument Consulting","OrganizationID":"17"},{"Organization":"Net Easy, Inc.","OrganizationID":"33"},{"Organization":"Northwestern Mutual Financial Network","OrganizationID":"7"},{"Organization":"Northwestern Mutual Financial Network","OrganizationID":"26"},{"Organization":"Northwestern Mutual Financial Network","OrganizationID":"3"},{"Organization":"Norwick Corporation","OrganizationID":"2"},{"Organization":"Photo Finish Consultants","OrganizationID":"1"},{"Organization":"Prudential","OrganizationID":"35"},{"Organization":"Purcell Construction Corp.","OrganizationID":"6"},{"Organization":"RetailData LLC","OrganizationID":"31"},{"Organization":"Richmond International Raceway","OrganizationID":"21"},{"Organization":"S Cube Inc.","OrganizationID":"14"},{"Organization":"Teledyne CollaborX, Inc","OrganizationID":"12"},{"Organization":"The Carlisle Group","OrganizationID":"37"},{"Organization":"Thrivent Financial for Lutherans","OrganizationID":"16"},{"Organization":"TLA Inc.","OrganizationID":"28"},{"Organization":"Tower Club","OrganizationID":"38"},{"Organization":"Virginia Commonwealth University","OrganizationID":"41"},{"Organization":"vita surgical","OrganizationID":"25"},{"Organization":"World Financial Group, Inc.","OrganizationID":"18"}]}
Would please anybody give it a look and let me know what I am doing wrong?
Thanks.