psybaron
asked on
JQuery autocomplete with AJAX and JSON
Hello Experts,
I am having troubles implementing JQuery autocomplete using JSON.
Basically, I get an JSON encoded data from my server (I use codeigniter php framework).
The JSON format is following:
[{"id":"1","prodname":"Can dy","code" :"CND01"," uname":"gr ams","pcna me":"Sweet s"} ..... ]
My questions are:
-How can I make the autocomplete of the Product field work?
-When a user selects certain Product, the fields ID,Code,Category and UOM get populated?
Also, this is my way of implementing Mater/Detail forms and data insertion. So, maybe you have any suggestions on improving it.
Thank you very much in advance!
Note: In the attached images, the point of interested is located in the red rectangle.
Screenshot.png
I am having troubles implementing JQuery autocomplete using JSON.
Basically, I get an JSON encoded data from my server (I use codeigniter php framework).
The JSON format is following:
[{"id":"1","prodname":"Can
My questions are:
-How can I make the autocomplete of the Product field work?
-When a user selects certain Product, the fields ID,Code,Category and UOM get populated?
Also, this is my way of implementing Mater/Detail forms and data insertion. So, maybe you have any suggestions on improving it.
Thank you very much in advance!
Note: In the attached images, the point of interested is located in the red rectangle.
Screenshot.png
ASKER
I thought that that part (the PHP/MySQL) is not much of an issue. But here it is:
My Controller function:
My Model function:
I'm having more troubles handling from the point when the JSON is ready, and don't know how to read it in implement it on the form fields.
So, upon even(select or something) on the Products field, all the other ID,Code,Category and UOM get populated.
Thanks!
My Controller function:
My Model function:
I'm having more troubles handling from the point when the JSON is ready, and don't know how to read it in implement it on the form fields.
So, upon even(select or something) on the Products field, all the other ID,Code,Category and UOM get populated.
Thanks!
dude i also did just start learning codeigniter but the only thing i can see here is ; You are fetching some data in the way of codeigniter rather than using the classic
Classic syntax should be like this ;
if(!isset($options['status '])) $where_cls=" where p.status='active' ";
$qs="SELECT p.id,p.prodname,p.code,u.u name,pc.pc name FROM exp_cd_products AS p LEFT JOIN exp_cd_uom AS u ON u.id = p.uname_fk LEFT JOIN exp_cd_product_category AS pc ON pc.id = p.pcname_fk $where_cls";
$data=mysql_query($qs);
The two blocks of code you wrote is simply does the thing above only.
What you need to do furthermore is ;
- Specify an input variable for filtering in an additional WHERE p.xxxxx='$_GET["user_input "]'; and add that to query as well.
- get the value you need to use in autocomplete (probably in an array)
( i do in classic way as ;
while($row=mysql_fetch_arr ay($data) )
{
$my_field[]=$row["fieldnam e"]; // you can add more joining them by .
}
- then use json_encode() as ;
echo json_encode($data);
- ALL the things above was to send a response to a ajax call from the page containing form and will be in another file apart from the main php
Lets say it autocomplete.php.
Then you must call this from the main php file (containing the form ) with javascript or better with Jquery. as below ;
by changing some fields to your tables and form & html code and preparing a div to show autocomplete results you can make them work. But for an inexperienced codeigniter user (like me) it's a little bit complicated i guess. so you may try adapting the samples i gave before to your page may be more easy.
i hope i could show you the light :)
cys bb
Classic syntax should be like this ;
if(!isset($options['status
$qs="SELECT p.id,p.prodname,p.code,u.u
$data=mysql_query($qs);
The two blocks of code you wrote is simply does the thing above only.
What you need to do furthermore is ;
- Specify an input variable for filtering in an additional WHERE p.xxxxx='$_GET["user_input
- get the value you need to use in autocomplete (probably in an array)
( i do in classic way as ;
while($row=mysql_fetch_arr
{
$my_field[]=$row["fieldnam
}
- then use json_encode() as ;
echo json_encode($data);
- ALL the things above was to send a response to a ajax call from the page containing form and will be in another file apart from the main php
Lets say it autocomplete.php.
Then you must call this from the main php file (containing the form ) with javascript or better with Jquery. as below ;
<script type="text/javascript">
function xrefresh_banka()
{
var qs = $("#your_users_inputs_id").val();
if(qs == '') {
return false;
}
else {
$.get("autocomplete.php?user_input="+qs+"&ts="+ new Date().getTime(), function(data) {
$("#place_to_show_autocomplete_results_id").val(data);//you may need to reshape data input before
}
);
}
}
</script>
by changing some fields to your tables and form & html code and preparing a div to show autocomplete results you can make them work. But for an inexperienced codeigniter user (like me) it's a little bit complicated i guess. so you may try adapting the samples i gave before to your page may be more easy.
i hope i could show you the light :)
cys bb
sorry echo json_encode($data); is wrong ... that should be -> echo json_encode($my_field);
and surely you must take "WHERE" out of the conditional string variable to the standard query for $GET["user_input"]
and surely you must take "WHERE" out of the conditional string variable to the standard query for $GET["user_input"]
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
there must be something wrong with the page you query database results. this code seems ok.
And you may consider using get instead of post for especially autocompletes because post doubles the requested connection to retrieve the result.
And one more thing , if ajax call occurs when you insert just one letter in the box there might be something wrong with the code above. As you've set minLength is 2 ?
And you may consider using get instead of post for especially autocompletes because post doubles the requested connection to retrieve the result.
And one more thing , if ajax call occurs when you insert just one letter in the box there might be something wrong with the code above. As you've set minLength is 2 ?
ASKER
I found solution to the problem, out side of EE.
But you can also easily implement the usage in links below to your code. Ask if you got any troubles with them.
http://pengoworks.com/workshop/jquery/autocomplete.htm
or
http://www.simonwhatley.co.uk/examples/autocomplete/jquery/