Save Update Delete and Get Records/Search From List /Library Using JSOM/ECMA Script

<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script lang="javascript" type="text/javascript">
 
$(document).ready(function ()
    {
    listAllCategories();
    $("#btn-new").on('click', function () {
        $(".c1").val('');
    });

    $("#btn-add").on('click', function () {
        createCategory();
     
    });

    $("#btn-update").on('click', function () {
        updateItem();
     
    });

    $("#btn-find").on('click', function () {
        findListItem();
    });

    $("#btn-delete").on('click', function () {
        deleteListItem();
 
    });
   });


function createCategory()
{
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item("Title", $("#CategoryId").val());
    oListItem.set_item("CategoryName", $("#CategoryName").val());
    oListItem.update();
    clientContext.load(oListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded() {
      listAllCategories();
      empty();
      alert('Save Record succefully');
}

function onQueryFailed(sender, args) {
    alert('Failed Records ');
}
function empty() {
    $("#CategoryId").val("");
    $("#CategoryName").val("");
 
 
}

function findListItem() {

   listItemId =  prompt("Enter the Id to be Searched ");
   var clientContext = new SP.ClientContext.get_current();
   var web = clientContext.get_web();
   var list = web.get_lists().getByTitle('CategoryList');
   clientContext.load(list);
   this.listItemToUpdate = list.getItemById(listItemId);
   clientContext.load(listItemToUpdate);
   clientContext.executeQueryAsync(
        Function.createDelegate(this, function () {
         
            $("#CategoryId").val(listItemToUpdate.get_item('Title'));
            $("#CategoryName").val(listItemToUpdate.get_item('CategoryName'));
        }),
        Function.createDelegate(this,fail)
        );

 
}

function updateItem() {
   var clientContext = new SP.ClientContext.get_current();
   var web = clientContext.get_web();
   var list = web.get_lists().getByTitle('CategoryList');
   clientContext.load(list);
   this.listItemToUpdate = list.getItemById(listItemId);
   clientContext.load(listItemToUpdate);
   listItemToUpdate.set_item('CategoryName', $("#CategoryName").val());
   listItemToUpdate.set_item('Title', $("#CategoryId").val());
   listItemToUpdate.update();
   clientContext.executeQueryAsync(
        Function.createDelegate(this, success),
        Function.createDelegate(this,fail)
        );

}

function deleteListItem() {

   var clientContext = new SP.ClientContext.get_current();
   var web = clientContext.get_web();
   var list = web.get_lists().getByTitle('CategoryList');
   clientContext.load(list);
   this.listItemToUpdate = list.getItemById(listItemId);
   clientContext.load(listItemToUpdate);
   listItemToUpdate.deleteObject();
   clientContext.executeQueryAsync(
        Function.createDelegate(this, success),
        Function.createDelegate(this, fail)
        );
}
function listAllCategories() {

    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('CategoryList');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
        '<Value Type=\'Number\'>44</Value></Geq></Where></Query><RowLimit>100</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.ongetQuerySucceeded), Function.createDelegate(this, this.ongetQueryFailed));      
     
}

function ongetQuerySucceeded(sender, args) {

     var listItemInfo = '';
     var table = $("#tblcategories");
     var innerHtml = "<tr><td>ID</td><td>Category Id</td><td>Category Name</td></tr>";
     var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        innerHtml += "<tr><td>"+ oListItem.get_item('ID') +"</td><td>" + oListItem.get_item('Title') + "</td><td>" + oListItem.get_item('CategoryName')+"</td></tr>";
     
    }
 
    table.html(innerHtml);
}

function ongetQueryFailed(sender, args) {

    alert('Request failed');
}

function success() {
    listAllCategories();
    $("#dvMessage").text("Operation Completed Successfully");
}

function fail() {
    $("#dvMessage").text("Operation failed  " + arguments[1].get_message());
}
</script>

<style>
table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}
</style>
<div id="dvMessage" style="color:#0000FF"></div>
</br>
</br>
<table>
    <tr>
    <td>
    <table>
        <tr>
            <td>Category Id</td>
            <td>
                <input type="text" id="CategoryId" class="c1"/>
            </td>
            </tr>
            <tr>
            <td>Category Name</td>
            <td>
                <input type="text" id="CategoryName" class="c1"/>
            </td>
            </tr>
            <tr>
            <td>
                <input type="button" value="New" id="btn-new" />
            </td>
            <td>
                <input type="button" value="Add" id="btn-add" />
            </td>
            <td>
                <input type="button" value="Update" id="btn-update" />
            </td>
            <td>
                <input type="button" value="Delete" id="btn-delete" />
            </td>
            <td>
                <input type="button" value="Find" id="btn-find" />
            </td>
        </tr>  
    </table>
    </td>
    <td>
 
    </td>
    </tr>
<tr>
<td>
<table id="tblcategories">

    </table>
</td>
</tr>
</table>

**********************Seach Item Query***********************************

var productcollection;
function getProducts(title) {
    try {
        var context = new SP.ClientContext.get_current();
        var web = context.get_web();
        var list = web.get_lists().getByTitle('product');
        var query = '<View Scope=\'RecursiveAll\'>'+
                        '<Query>'+
                            '<Where>'+
                            '<Contains>'+
                                '<FieldRef Name=\'ProductName\'/>' +
                                '<Value Type=\'Text\'>' + title +'</Value>'+
                            '</Contains>'+
                            '</Where>'+
                        '</Query>'+
                             '</View>';
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml(query);

        this.productcollection = list.getItems(camlQuery);
        context.load(this.productcollection, 'Include(ProductName, ProductDescription, ProductType, LaunchDate, AvailableQuantity)');
        context.executeQueryAsync(Function.createDelegate(this, this.productsReceived), Function.createDelegate(this, this.failed));
    }
    catch (e) {
        alert(e);
    }
}
function productsReceived() {
    alert('got products');
    prcessProducts(this.productcollection);
}
function failed(sender, args) {
    alert('failed. Message:' + args.get_message());
}