Jquery ui autocomplete no data returned
I am having problems with autocomplete. I have the following code:
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
$(function() {
$('.namesuggestclass').autocomplete({
source: function(request, response){
$.ajax({
url: 'cfc/basic.cfc?method=getIndivs',
dataType: "json",
data: {
searchterm: request.term
},
error: function(xhr, textStatus, errorThrown) {
alert(errorThrown);
},
success: function(data){
response(data);
}
})
},
minLength: 3,
onSearchError: function (query, jqXHR, textStatus, errorThrown) {
alert(errorThrown);
},
select: function(event, ui) {
alert(ui.item.ISRECNUM);
}
});
});
<cfinput name="namesuggest" class="namesuggestclass">
I am running a Coldfusion 10 server. When I type 3 or more characters, I get 3 blank lines.
My cfc:
<cffunction name="getIndivs" access="remote" HINT="Get All Resources" returnformat="json" output="false" >
<cfargument name="searchterm" required="True" default="">
<cfset local.returnArray =ArrayNew(1)>
<cfquery name="local.get_Indivs" datasource="#request.dsn#" maxrows=20>
SELECT ui.id as isrecnum, UI.lastname + ', ' + UI.firstname as iname , c.name as companyname, c.city as companycity, UI.Status_Flag
FROM users_info AS UI left join
companies as c on c.id = ui.current_company_number
WHERE 0=0
And ui.status_Flag != 'D'
<cfif trim(arguments.searchterm) NEQ "">
AND UI.lastname + ' ' + ui.firstname + ' ' + c.name like
<cfqueryparam cfsqltype="cf_sql_varchar" value="#left(trim(arguments.searchterm),255)#%">
<cfelse>
AND UI.lastname = 'abcdefg' <!--- return empty query vjl 2011/07/27 --->
</cfif>
ORDER BY lastname, firstname
</cfquery>
<cfloop query="local.get_Indivs">
<cfset indivStruct = structNew() />
<cfset indivStruct['ISRECNUM'] = ISRECNUM />
<cfset indivStruct['INAME'] = INAME />
<cfset indivStruct['COMPANYNAME'] = COMPANYNAME />
<cfset indivStruct['COMPANYCITY'] = COMPANYCITY />
<cfset arrayAppend(local.returnArray,indivStruct) />
</cfloop>
<CFRETURN local.returnArray>
<!--- <CFRETURN local.get_Indivs> --->
</cffunction>
Data returned from the cfc call; [{"ISRECNUM": 77137, "INAM": "Lan, Donald", "COMPANYNAME": "Company A", "COMPANYCITY": "Dallas"}, {"ISRECNUM": 240316, "INAM": "Lan, Mike "," COMPANYNAME ":" Company B "," COMPANYCITY ":" Calgary "}, etc ...............]
EDIT: I have updated my code and data. I don't see what I am doing than other working examples.
+3
source to share
2 answers
As vilsad said: wrong json data format. You are trying to recover data retrieved from database, json format required by jqueryui-autocomplete is the following:
label:xxxx --display as select title
value:xxxx --as select element value
In php, I format my data like this:
$ds=$db->query('select id,title from products whrere title like'.keyword.'%');
$result=array(
'label'=>$ds['title'],
'value'=>$ds['id']
);
echo json_encode($result);
sorry for my English
+1
source to share