Actually I'm trying to implement the autocomplete functionality to one text field but getting the above error, couldn't understand why I'm getting this error. Can you help me in resolving this error? For your reference I'm providing all the necessary code below:

report-student-result.tpl

<link rel=stylesheet type=text/css href={$control_css_url}ui-lightness/jquery-ui-1.10.3.custom.css>  

<link rel=stylesheet type=text/css href={$control_css_url}autocomplete.css>

<label>Name</label>

            <div class=form-element id=friends>

              <input type=text class= name=user_name id=user_name value={$user_name} />

            </div>



<script language=javascript type=text/javascript>

$(function(){  



  var class_id = $('#class_id').val();

  var section_id = $('#section_id').val();



        //attach autocomplete  

        $(#user_name).autocomplete({  



            //define callback to format results  

            source: function(req, add){  



                //pass request to server  

                $.getJSON(report_student_result.php?callback=?op=get_student_names&class_id=+class_id+&section_id=+section_id, req, function(data) {  



                    //create array for response objects  

                    var suggestions = [];  



                    //process response  

                    $.each(data, function(i, val){                                

                    suggestions.push(val.name);  

                });  



                //pass array to callback  

                add(suggestions);  

            });  

        },  



        //define select handler  

        select: function(e, ui) {  



            //create formatted friend  

            var friend = ui.item.value,  

                span = $(<span>).text(friend),  

                a = $(<a>).addClass(remove).attr({  

                    href: javascript:,  

                    title: Remove  + friend  

                }).text(x).appendTo(span);  



                //add friend to friend div  

                span.insertBefore(#user_name);  

            },  



            //define select handler  

            change: function() {  



                //prevent 'to' field being updated and correct position  

                $(#user_name).val().css(top, 2);  

            }  

        }); 

        //add click handler to friends div  

        $(#friends).click(function(){  



            //focus 'to' field  

            $(#user_name).focus();  

        });  



        //add live handler for clicks on remove links  

        $(.remove, document.getElementById(friends)).live(click, function(){  



            //remove current friend  

            $(this).parent().remove();  



            //correct 'to' field position  

            if($(#friends span).length === 0) {  

                $(#user_name).css(top, 0);  

            }                 

        });                      

    });



</script>

Please help me out to resolve this error. Thanks in advance.