$(function() {
    AutoCompleteInit();
});

function response() {
$
}
function AutoCompleteInit() {
    $('.searchBarAuto').autocomplete({ position: { my: "right top", at: "right bottom" },
   
        /*search: function(event, ui) {
        },*/
 
        // where the data is coming from 

        source: function(request, response) {
           
            $.ajax({
                
                url: "/AutoComplete.asmx/BindData",
     
                dataType: "xml",

               data: {
                        
                    //where you would type into the webservice the value you are trying to find

                    Title: request.term,
                    Language: 0

                },

                //when it is successful do something

                success: function(data) {


                    //map creats a new array

                    autodata = $("AutoCompleteItem", data).map(function() {

                        return {

                            label: $("Title", this).text(),
                            

                            link: $("Link", this).text()

                        };

                    })

                    response(autodata)
                }

            })

        },

        minLength: 3,

       select: function(event, ui, response) {

            //this where do the linking when selected

            var pageLink = ui.item.link;

            window.location = "" + pageLink + ""



        },

         open: function() {

            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");

        },

        close: function() {



            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");

        },

       focus: function(event, ui) {



            $('.ui-autocomplete li').removeClass('selected');



            var selectedItem = $('#ui-active-menuitem').parent();

            $(selectedItem).addClass('selected');

        }

    }); 
}