Customizing SharePoint list and implementing Quick search using jQuery

How to Customize SharePoint list and implementing Quick search using jQuery

1. Create a SharePoint list and create a view for it.

2. Now choose the created view and go to modify view, under Style choose Shaded as shown below.

 3. Edit the list and add script editor web part to it and paste the below code.

Code:-

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script>

<style>

.ms-addnew {

  display: none;

}

input[type=button] {

    background-color: #4CAF50;

    border: none;

    color: white;

    padding: 16px 32px;

    text-decoration: none;

    margin: 4px 2px;

    cursor: pointer;

}

</style>

<script type="text/javascript">

$(document).ready(function(){

  $("input.search").change(function() {

debugger;

     var txt = $("input.search").val();

        if (txt)

         {

               $("#WebPartWPQ2").find("tr.ms-itmhover:not(:Contains("+txt+"))").hide();

               $("#WebPartWPQ2").find("tr.ms-itmhover:Contains("+txt+")").show();

         } 

                   

        else {

                $("#WebPartWPQ2").find("tr.ms-itmhover").show();

             }

       }).keyup(function(){$(this).change();

     });

});

function bulkDelete() { 

    var context = SP.ClientContext.get_current();

    var listID = SP.ListOperation.Selection.getSelectedList(context);

    var selectedItems = SP.ListOperation.Selection.getSelectedItems(context);

    if (selectedItems.length > 0) {

        var lstObject = context.get_web().get_lists().getById(listID);

        for (var i = 0; i < selectedItems.length; i++) {

            this.lstObjectItem = lstObject.getItemById(selectedItems[i].id);

            lstObjectItem.deleteObject();

        }

        context.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure));

    }

    else {

        alert("Please Select item !");

    }

}

function onSuccess(sender, args) {

    alert('Items Deleted');

    window.location.href = window.location.href;

}

function onFailure(sender, args) {

    alert('Request failed. ' + args.get_message());

}

function AddItem(){

window.location.replace(_spPageContextInfo.webAbsoluteUrl+"/Lists/EmployeeList/NewForm.aspx");

}

</script>

<div style="padding: 5px; border: 1px solid #cccccc; width: 60%; margin: 10px auto 0pt; background: none repeat scroll 0% 0% #efefef; display: block;">

<h3 style="text-align: center;">Search : <input class="search" style="padding: 10px;" type="text"/>

<input type="button" value="Delete Selected" id="btnDeleteItems" onclick="bulkDelete()" />&nbsp;&nbsp;<input type="button" value="Add Item" id="btnAddItem" onclick="AddItem()" />