Restful Spring Knock Out JS JQuery AutoComplete

                               Restful Spring Knock Out JS JQuery AutoComplete Integration

AJAX :

Ajax will load the data in the background without refreshing the website and displaying it on the webpage.
AJAX stands for Asynchronous JavaScript and XML. As name shows it uses java script to fulfill desired action. Normally we have to use lengthy java script code to accomplish that along with browser compatibility issues as different browsers requires different AJAX syntax for implementation.

JQuery AJAX Method :

 The JQuery $.ajax() method is used to perform an JQuery ajax request on HTTP request object.

$.ajax() :

  $.ajax() method will take several parameters.

url : URL to which the request will be sent.

type :  Request type sent to the server(GET, POST, PUT, DELETE). Default is GET.

data : JQuery and ajax data to be sent to the ajax request.

dataType : Need to define JQuery ajax data type expected to be return from the server side.

success : Ajax request success. A callback function run and return the response.

error : Ajax request failure. A callback function run and return the error.

KnockOutJs  Custom Binding :

Knockout has build in bindings like click, submit, enable, disable, checked, options binding and more..
We can create our own custom bindings by how the observable will interact with the DOM.

 ko.bindingHandlers.satyaBindingName = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {     
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    }

};

init : init will be called when the binding is first applied to the element. Setup any initial state, event handlers etc.

update : Update method is called when the binding is applied to the element and any dependencies changed.

element : The DOM element involved in this binding

valueAccessor : A JavaScript function that you can call to get the current model property that is involved in this binding.
                          Call this without passing any parameters (i.e., call valueAccessor()) to get the current model property value. To easily accept both observable and plain values, call ko.unwrap on the returned value.

allBindings : A JavaScript object that you can use to access all the model values bound to this DOM element. Call allBindings.get('name') to retrieve the value of the name binding (returns undefined if the binding doesn’t exist); or allBindings.has('name') to determine if the name binding is present for the current element.

viewModel : This parameter is deprecated in Knockout 3.x. Use bindingContext.$data or bindingContext.$rawData to access the view model instead.

bindingContext : An object that holds the binding context available to this element’s bindings.This object includes special properties including $parent, $parents, and $root that can be used to access data that is bound against ancestors of this context.

AutoComplete :

Autocomplete involves the program predicting a word or phrase that the user wants to type in without the user actually typing it in completely. This feature is effective when it is easy to predict the word being typed based on those already typed, such as when there are a limited number of possible or commonly used words.

We can achieve Autocomplete using Knockout JS and AJAX.

JSP :

<div class="margin5">
<input type="button" class="shortbutton" value="NAME" id="name" name="student_name_search" disabled="disabled">
<input type="text" class="shortText" id="name" name="stdname" data-bind="stdnameAutocomplete: { source: stdNameSearch, select: stdNameRegNo }"></input>
</input>

</div>

stdnameAutocomplete :

   Currently I am calling auto complete using stdnameAutoComplete.   stdnameAutoComplete will be called using the parameter source and select params.

$(…).autocomplete({ source: xxxx, select:  yyyy})  is required by the Autocomplete  constructor.

source :

   Using source we need to invoke the ajax call using KO Binding Handler.

select :

    Using select we need to populate the ajax success result. This should map from JSP page(stdNameRegNo) to Knockout View Model(stdNameRegNo).


View Model :

   In  view model we need to do the actual ajax call to the Spring Restful Web Service. Here I am using my previously created Spring 3 Rest Web Service Integration URL(http://localhost:8080/Spring3RestWebServiceIntegration/module/path/)for Ajax call from Knockout JS. We need to pass the request object as student name using this Rest URL.

AJAX  Call :

 ko.bindingHandlers.stdNameSearch= function(request, response) {
            var text = request.term;
            $.ajax({
                type: 'GET',
                url: 'http://localhost:8080/Spring3RestWebServiceIntegration/module/path/'+'?name='+text,
                data: {
                    json: '{}'                    
                },
                success: function(data) {                     
                    response($.map(data, function(student) {
                    return {
                            stdNameRegNo : student.registrationNumber,
                            label: student.name
                        };
                    }));
                }
            });
        };
Here I am returning the student name from my Spring Restful Web Service and assigning to  stdNameRegNo as my select params.

I am using my custom Binding Handler as stdNameSearch for Knockout JS AutoComplete.