jquery ui autocomplete and php json string

Question

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()
        });
    });

I might be mistaken but I think it expects an array of objects with id and value properties, not just an array with strings. — slash197
– slash197, Commented Mar 14, 2012 at 16:09
@pinkypower - An array of strings will work according to the docs: jqueryui.com/demos/autocomplete/#remote The PHP and generated JSON look fine, the problem is likely somewhere in your Javascript. Could you post that? — zim2411
– zim2411, Commented Mar 14, 2012 at 16:11

jasonlfunk · Accepted Answer · 2012-03-14 17:01:31Z

1

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);
            }
        );
}

answered Mar 14, 2012 at 17:01

jasonlfunk

5,2695 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jasonlfunk · Accepted Answer · 2012-03-14 16:12:47Z

0

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}).

answered Mar 14, 2012 at 16:12

jasonlfunk

5,2695 gold badges32 silver badges39 bronze badges

Comments

Duke · Accepted Answer · 2012-03-14 16:14:03Z

0

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

answered Mar 14, 2012 at 16:14

Duke

37.3k13 gold badges57 silver badges74 bronze badges

Collectives™ on Stack Overflow

jquery ui autocomplete and php json string

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related