<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="http://www.trirand.net/aspnetmvc/Content/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/JavaScript"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://www.trirand.net/aspnetmvc/Scripts/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
     var gridData;
     var obj;

    function search(jsonString) {
        $("#pdata").jqGrid("GridUnload");

        gridData = JSON.stringify(jsonString);
        obj = JSON.parse(gridData);

        jQuery("#pdata").jqGrid({
        data&colon; jsonString,
        datatype: 'local',
        colNames:['Id','Name'],
        colModel:[
            {name:'Id',index:'Id', width:40},
            {name:'Name',index:'Name', width:40}],
        rowNum:10,
        rowList:[5,10,20,30,50,100, 1000],
        pager: '#ppdata',
        sortname: 'name',
        viewrecords: true,
        sortorder: "desc",
        caption:"Contact Data",
        width: 800,
        height: 180,
    });
   $("#pdata").trigger("reloadGrid");
 }

function showDataInJqGrid(){
    var accName = document.getElementById("query").value;
    contactSearch(accName);
}

function contactSearch(name) {
    var jsonString;
    Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.GridController.showContacts}',
            name,
            function (result, event) {
                if(event.type == 'exception'){
                    alert(event.message);
                } else{
                    jsonString = result;
                    search(jsonString);
                    gridData = JSON.stringify(jsonString);
                }
            },
            {escape: true}
        );

      // I first tried this below option also to call controller method but same results i got
     /*GridController.showContacts(name, function (result, event) {
                if(event.type == 'exception'){
                    alert(event.message);
                } else{
                    jsonString = result;
                    search(jsonString);
                    gridData = JSON.stringify(jsonString);
                }
          }); */
}

</script>

<apex:sectionHeader title="Contact Search using AccountID" subtitle="Search Contact" />
  <apex:pageBlock mode="maindetail">
    <apex:form id="qform" >
            <apex:pageBlockSection title="Search Contact for the Account" collapsible="false" columns="1" >
                <table width="100%">
                    <tr>
                        <td><h3>Enter Account Name </h3>&nbsp;&nbsp;<input type="text" id="query" />&nbsp;&nbsp;&nbsp;
                            <input type="button" value="Show Contacts " class="btn" onclick="showDataInJqGrid();" />&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                </table>
            </apex:pageBlocksection>
    </apex:form>

    <apex:pageBlockSection title="Contacts in Response" collapsible="false" rendered="true">
        <div id="response" style="font-size: 16px;width: 300px;font-family: monospace; font-stretch: expanded" />
        <table id="pdata"></table>
        <div id="ppdata"></div>
    </apex:pageBlocksection>
  </apex:pageblock>
</apex:page>

global class GridController {

public GridController() {

}

@RemoteAction
global static List<Contact> showContacts(String accName){
    system.debug('inside method: '+accName);
    accName = '%'+ accName+'%';
    List<Contact> lst_contacts = new List<Contact>([select id, name from contact where Account.Name LIKE : accName]);
    return lst_contacts;
}