JQuery autocomplete with remote JSON datasource not working

Question

I'm using this jquery plugin : JQuery Autocomplete. Problem I'm getting json data but it's not appearing on the autocomplete list. The JQuery code:

$( "#student-id" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "ajax/ajax_admin.php?auto_student=" + $( "#student-id" ).val(),
            dataType:"json",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function( data ) {
                response( $.map( data.students, function( item ) {
                    return {
                        label: item.id +" , "+ item.name,
                        value: item.id
                    }
                }));
            }
        });
    },
    minLength: 2,
    open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
});

The PHP Script is :

public function load_ajax_student_list($val)
{
    $val = "%".$val."%";
    $stmt = $this->conn->prepare("select * from student where studentAiubId like :value limit 0,5");
    $stmt->bindValue(':value', $val);
    $stmt->execute();
    if($stmt->rowCount() < 1)
        echo "";
    else
    {
        $result = $stmt->fetchAll();

        $output = array();
        foreach($result as $row)
        {
            if($row['mname']=="")
                $name = $row['fname']." ".$row['lname'];
            else
                $name = $row['fname']." ".$row['mname']." ".$row['lname'];
            $data["name"] = $name;
            $data["id"] = $row['studentAiubId'];
            $output["students"][] = $data;
        }
        echo json_encode($output);                
    }
}

If the call goes like this: ajax/ajax_admin.php?auto_student=10
The produced data from PHP script is :

{
    "students": [
        {"name":"Moh Mamun Sardar","id":"10-15987-1"},
        {"name":"Rehan Ahmed","id":"10-12451-2"},
        {"name":"Abid Hassan","id":"10-15412-1"},
        {"name":"Abir Islam","id":"10-11245-1"}
    ]
}

But Nothing showing on autocomplete. What I'm doing wrong?

item.value must be item.name or item.id.There is no field called "value on returning json" — Hüseyin BABAL
– Hüseyin BABAL, Commented Jan 14, 2014 at 11:23
i'was just using that before i posted this. sorry my bad. editing — Mamun Sardar
– Mamun Sardar, Commented Jan 14, 2014 at 11:25
thanks anyway. I was also using that. Didn't work for me. Now all of a sudden it's working. :) — Mamun Sardar
– Mamun Sardar, Commented Jan 14, 2014 at 11:34

rajesh kakawat · Accepted Answer · 2014-01-14 11:36:07Z

3

try something like this

$.map( data.students, function(item ) {
    return {
    label: item.name,
    value: item.id
});

it is minlength not minLength see casing

edited Jan 14, 2014 at 11:36

answered Jan 14, 2014 at 11:27

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

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

3 Comments

Mamun Sardar Over a year ago

But Here in view source on their website : jqueryui.com/autocomplete/#remote-jsonp -It's minLength

rajesh kakawat Over a year ago

you can here in this fiddle by changing casing see whether it working or not jsfiddle.net/8khSs/1

rajesh kakawat Over a year ago

@MamunSardar might be some problem in fiddle.net

gprusiiski · Accepted Answer · 2014-01-14 13:09:44Z

0

You have forgotten the "appendTo" property. In this propery you have to specify the selector of the element you wish the information to be appended to like this

appendTo: '.class' or appendTo: '#id'

You have to add this property to the initialization of the autocomplete as a sibling of source and etc ...

answered Jan 14, 2014 at 13:09

gprusiiski

4504 silver badges18 bronze badges

Collectives™ on Stack Overflow

JQuery autocomplete with remote JSON datasource not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related