Retrieve record from SharePoint by search column List using JavaScript

Retrieve record from SharePoint by search column List using JavaScript
Retrieve record from SharePoint List using JavaScript

.aspx
    <div>
         <div id="divGetCustomerdata">    
    </div>
        <div>
            <table>
                 <tr>
                <td>
                    <input id="txtID" type="text"  />
                </td>          
                <td >
                   <input id="btnCustomer" type="submit" value="Get Customer data" />
                </td>
            </tr>

            </table>
        </div>
        <table id="tblCustomer"></table>

    </div>

.js file

var clientcontext;
var hostWebUrl;
var appWebUrl;
var CustomercollListItem;

$(document).ready(function () {
    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
 
    $("#btnCustomer").click(function () {
        listAllCustomer();
    });
});


//This function is used to get the hostweb url
function manageQueryStringParameter(paramToRetrieve) {
    var params =
    document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve) {
            return singleParam[1];
        }
    }
}

// Get the List data

function listAllCustomer() {   

    var ctx = new SP.ClientContext(appWebUrl);

    var appContextSite = new SP.AppContextSite(ctx, hostWebUrl);

    var web = appContextSite.get_web();

    var oList = web.get_lists().getByTitle("Customer");

    if ($("#txtID").val().trim().length > 0 ) {

        // Get the specifiec columns of lists by columns filter

        var camlQuery = new SP.CamlQuery();

        //camlQuery.set_viewXml('<View><Query><Where><eq><FieldRef Name=\'ID\'/>' + '<Value Type=\'Number\'>' + $("#txtID").val() + '</Value></eq></Where></Query></View>');

        //camlQuery.set_viewXml('<View><Query><Where><Contains><FieldRef Name=\'FirstName\'/><Value Type=\'Text\'>' + $("#txtID").val() + '</Value></Contains></Where></Query></View>');

        camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'ID\'/><Value Type=\'Counter\'>' + $("#txtID").val().trim() + '</Value></Eq></Where></Query></View>');

        //returns the item collectionbased on the query with selected columns values       

        CustomercollListItem = oList.getItems(camlQuery, 'Include(ID, FirstName, LastName, Occupation, Location, Country, Comments)');

        ////returns the item collectionbased on the query

        //CustomercollListItem = oList.getItems(camlQuery);

    }

    else {

        // Get the All columns of lists

        var camlQuery = SP.CamlQuery.createAllItemsQuery();

        //camlQuery.set_viewXml('<View><RowLimit>10</RowLimit></View>');

        //returns the item collectionbased on the query with selected columns values       

        CustomercollListItem = oList.getItems(camlQuery, 'Include(ID, FirstName, LastName, Occupation, Location, Country, Comments)');

        //CustomercollListItem = oList.getItems(camlQuery);

    }  

    ctx.load(CustomercollListItem);

    ctx.executeQueryAsync(Function.createDelegate(this, this.ongetQuerySucceeded), Function.createDelegate(this, this.ongetQueryFailed));

}

function ongetQuerySucceeded(sender, args) {

    var listItemInfo = '';

    var table = $("#tblCustomer");

    var innerHtml = "<tr><td>ID</td><td>First Name</td><td>Last Name</td><td>Occupation</td>      <td>Location</td><td>Country</td><td>Comments</td></tr>";

    var listItemEnumerator = CustomercollListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();

        innerHtml += "<tr><td>" + oListItem.get_item('ID') + "</td><td>" + oListItem.get_item('FirstName') + "</td><td>" + oListItem.get_item('LastName') + "</td><td>" + oListItem.get_item('Occupation') + "</td><td>" + oListItem.get_item('Location') + "</td><td>" + oListItem.get_item('Country') + "</td><td>" + oListItem.get_item('Comments') + "</td></tr>";

    }

    table.html(innerHtml);

}

function ongetQueryFailed(sender, args) {

    $("#divGetCustomerdata").text("Operation failed  " + arguments[1].get_message());   

}