Link to home
Create AccountLog in
Avatar of psybaron
psybaronFlag for Greece

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":"Candy","code":"CND01","uname":"grams","pcname":"Sweets"} ..... ]

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
Avatar of Erdinç Güngör Çorbacı
Erdinç Güngör Çorbacı
Flag of Türkiye image

You didn't give any code? How will we suggest, you should give us php and mysql structure .
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/
Avatar of psybaron

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!
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.uname,pc.pcname 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_array($data) )
     {
      $my_field[]=$row["fieldname"]; // 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 ;

       
<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>

Open in new window


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"]
ASKER CERTIFIED SOLUTION
Avatar of psybaron
psybaron
Flag of Greece image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
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 ?
I found solution to the problem, out side of EE.