CODEWITHSUNDEEP
phpjqueryjson
Wern Ancheta
Wern Ancheta

Reputation: 23327

jquery ui autocomplete and php json string

I'm using php to fetch the data from mysql database and then use that data on the jquery ui autocomplete. But it seems like the JSON that is returned doesn't match what jquery ui needs. The JSON returned looks something like this:

["dyes miran famint","annie ferrer mendrez","annie ferrer mendrez","anton setra masgre","anton setra masgre","jeniffer hades cruz","jeniffer hades cruz","alvin louie urbano maranon","alvin louie urbano maranon","francisza jerrielleza bullonza","blaze br tags anchor"]

I even used jQuery.parseJSON on it.

And here's what I did on the php file:

$class_code = $_POST['class_code'];

$student_list = array();
$students = mysql_query("SELECT accounts.id, fname, mname, lname, classcode
                        FROM account_details
                        LEFT JOIN accounts ON account_details.id = accounts.id
                        LEFT JOIN class_rooster ON accounts.id = class_rooster.id
                        WHERE accounts.status = 1 AND accounts.type='student'
                        AND (class_rooster.id  IS NULL OR classcode !='$class_code')");
$students_num = mysql_num_rows($students);
if($students_num > 0){
    while($row = mysql_fetch_assoc($students)){

        $student_list[] = $row['fname'] . ' ' . $row['mname'] . ' ' . $row['lname'];

    }
    echo json_encode($student_list);

Here's the error that I'm getting:

Uncaught TypeError: Property 'source' of object #<Object> is not a function

Here's the JavaScript:

function get_students(){
        var class_code = $('#current_classes').val();
        $.post('student_list.php', {'class_code' : class_code},
            function(data){

                return data;
            }
        );
    }


    $("#student_name").live('click', function(){

        $("#student_name").autocomplete({
            source:  get_students()
        });
    });

Upvotes: 0

Views: 541

Answers (3)

jasonlfunk
jasonlfunk

Reputation: 5249

Check out the Overview section of the documentation on how to use the callback source type. The second argument passed to the function is the response callback to be used. Your get_students() function should look something like this:

function get_students(current_val,callback){
        var class_code = $('#current_classes').val();
        $.post('student_list.php', {'class_code' : class_code},
            function(data){
               callback(data);
            }
        );
}

Upvotes: 1

Duke
Duke

Reputation: 37070

I think you are not using the source entity in the autcompelete plugin code. Check your auto complete code

$("#inputbox").autocomplete({ source: data });

I believe You may use data without source entity

Also check your php output array

Upvotes: 0

jasonlfunk
jasonlfunk

Reputation: 5249

Take a look at the documentation, it's looking for something like this: 

$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

My guess is that you are doing $().autocomplete(json_obj) instead of $().autocomplete({source: json_obj}).

Upvotes: 0

Related Questions