Tuesday, 9 February 2016

search over list using jquery

This is search over list using jquery
In this tutorial we can search over a list,can select that list and add to new list.
 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });

           count = $('#right-side ul li').size();
            document.getElementById("count").innerHTML = count;

            if($('#right-side ul li').size()<1){
                $("#update_btn").hide()
            }else{
                $("#update_btn").show()
            }

            $("#txtSearchPage").keyup(function () {

                var search = $(this).val();

                $("#append-left-list>li").show();
                if (search)
                    $("#append-left-list>li").not(":containsNoCase(" + search + ")").hide();
            });


            $.expr[":"].containsNoCase = function (el, i, m) {
                var search = m[3];
                if (!search) return false;
                return new RegExp(search, "i").test($(el).text());
            };

            $('.masterTooltip').hover(function () {
                        // Hover over code
                        var title = $(this).attr('title');
                        $(this).data('tipText', title).removeAttr(
                                'title');
                        $('<p class="tooltip"></p>').text(title)
                                .appendTo('body').fadeIn('slow');
                    },
                    function () {
                        // Hover out code
                        $(this).attr('title',
                                $(this).data('tipText'));
                        $('.tooltip').remove();
                    }).mousemove(function (e) {
                        var mousex = e.pageX + 20; //Get X coordinates
                        var mousey = e.pageY + 10; //Get Y coordinates
                        $('.tooltip').css({
                            top: mousey,
                            left: mousex
                        })
                    });
            var size = 1;
            $('#left-side li').click(function () {
                $(this).toggleClass('active');
            });

            $('#right-side li').click(function () {
                $(this).toggleClass('active');
            });


            $('#addrightElement').click(function () {
                var $items = $('#right-side li.active');
                if ($('#right-side li.active').length != 0) {
                    size = size - 1;
                    $items.removeClass('active');
                    $('#left-side ul').append($items);
                    count = $('#right-side ul li').size();

                    document.getElementById("count").innerHTML = count;
                }
                if($('#right-side ul li').size()<1){
                    $("#update_btn").hide()
                }else{
                    $("#update_btn").show()
                }
            });



            $("#update_btn").click(function(){

                var listItems = $("#append-right-list  li");
                listItems.each(function(li) {
                    console.log($(this).attr('value'));

                    var newhidden = $("<input type='hidden' name='ids' value='"+$(this).attr('value')+"' />");

                    $('#formID').prepend(newhidden)
                });

                return true

            });


            $('#addleftElement').click(function () {
                size = $('#right-side ul li').length;

                var len = $('#left-side li.active').length;
                size = size + 1;
                var $items = $('#left-side li.active');
                if ($('#left-side li.active').length != 0) {
                    $items.removeClass('active');
                    $('#right-side ul').append($items);
                    count = $('#right-side ul li').size();
                    $('#right-side ul li').show();
                    document.getElementById("count").innerHTML = count;
                }
                if($('#right-side ul li').size()<1){
                    $("#update_btn").hide()
                }else{
                    $("#update_btn").show()
                }
            });

        });




    </script>



</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>



<div style="padding: 20px">

    <table style="padding :30px" >
        <tr>
            <td><b>All List</b> &nbsp;&nbsp;&nbsp;<input placeholder="Search"
                                                                        id="txtSearchPage"></td>
            <td></td>
            <td><b>Selected List</b></td>
        </tr>

        <tr>
            <td valign="top">
                <Section id="left-side">

                    <ul id="append-left-list">
                  
                   <li  class="masterTooltip" title="Branch Office suraj" value="1">suraj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="1">sura</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="12">surj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="12">suaj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="111">sraj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="132">uraj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="112">asuraj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="121">ssuraj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="41">suuraj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="51">surraj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="231">suradj</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="16">surajd</li>
                   <li  class="masterTooltip" title="Branch Office suraj" value="124">surajd</li>

                </ul>

                </Section>
            </td>
            <td style='vertical-align: middle !important; padding: 0px 30px 0px 30px;'>
                <input id="addleftElement" type="button" value="&#187;" class="button1"/><br/>
                <input id="addrightElement" type="button" value="&#171;" class="button1"/><br/>
            </td>
            <td valign="top">
                <Section id="right-side">
                    <ul id="append-right-list">
                       
                    </ul>
                </Section>
            </td>

        </tr>
        <tr>
            <td style='padding: 0px 30px 0px 30px;'>

                <form ID="formID" action="nextAction">
                  
                    <input id="update_btn" type="submit" value="Update"
                         /><br/>
                </form>

            </td>
            <td></td>
              <td><p><b>No. Of Selected  :</b> <span id="count">0</span></p></td>
        </tr>
    </table>


</div>


</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)