Tuesday, 30 August 2016

Filter or Search ASP.Net DropDownList Using JavaScript

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoChosen.aspx.cs" Inherits="Demo.DemoChosen" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>

    <title></title>

    <style>
        .panel-heading
        {
            cursor: pointer;
        }

        select.form-control + .chosen-container.chosen-container-single .chosen-single
        {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.428571429;
            color: #555;
            vertical-align: middle;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
            -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            background-image: none;
        }

            select.form-control + .chosen-container.chosen-container-single .chosen-single div
            {
                top: 4px;
                color: #000;
            }

        select.form-control + .chosen-container .chosen-drop
        {
            background-color: #FFF;
            border: 1px solid #CCC;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            background-clip: padding-box;
            margin: 2px 0 0;
        }

        select.form-control + .chosen-container .chosen-search input[type=text]
        {
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.428571429;
            color: #555;
            vertical-align: middle;
            background-color: #FFF;
            border: 1px solid #CCC;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            background-image: none;
        }

        select.form-control + .chosen-container .chosen-results
        {
            margin: 2px 0 0;
            padding: 5px 0;
            font-size: 14px;
            list-style: none;
            background-color: #fff;
            margin-bottom: 5px;
        }

            select.form-control + .chosen-container .chosen-results li,
            select.form-control + .chosen-container .chosen-results li.active-result
            {
                display: block;
                padding: 3px 20px;
                clear: both;
                font-weight: normal;
                line-height: 1.428571429;
                color: #333;
                white-space: nowrap;
                background-image: none;
            }

                select.form-control + .chosen-container .chosen-results li:hover,
                select.form-control + .chosen-container .chosen-results li.active-result:hover,
                select.form-control + .chosen-container .chosen-results li.highlighted
                {
                    color: #FFF;
                    text-decoration: none;
                    background-color: #428BCA;
                    background-image: none;
                }

        select.form-control + .chosen-container-multi .chosen-choices
        {
            display: block;
            width: 100%;
            min-height: 34px;
            padding: 6px;
            font-size: 14px;
            line-height: 1.428571429;
            color: #555;
            vertical-align: middle;
            background-color: #FFF;
            border: 1px solid #CCC;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
            background-image: none;
        }

            select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"]
            {
                height: auto;
                padding: 5px 0;
            }

            select.form-control + .chosen-container-multi .chosen-choices li.search-choice
            {
                background-image: none;
                padding: 3px 24px 3px 5px;
                margin: 0 6px 0 0;
                font-size: 14px;
                font-weight: normal;
                line-height: 1.428571429;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                border: 1px solid #ccc;
                border-radius: 4px;
                color: #333;
                background-color: #FFF;
                border-color: #CCC;
            }

                select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close
                {
                    top: 8px;
                    right: 6px;
                }

        select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
        select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
        select.form-control + .chosen-container .chosen-search input[type=text]:focus
        {
            border-color: #66AFE9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
        }

        select.form-control + .chosen-container-multi .chosen-results li.result-selected
        {
            display: list-item;
            color: #ccc;
            cursor: default;
            background-color: white;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="form-group">
                <label for="id_tipo_equipo" class="control-label">Tipo</label>
                <select name="id_tipo_equipo" id="id_tipo_equipo" class="form-control chosen" data-placeholder="[Tipo]">
                    <option value="1">Access Point</option>
                    <option value="2">Adaptador</option>
                    <option value="3">Adaptador DVI a VGA</option>
                    <option value="4">Adaptador Electrico para Discos</option>
                    <option value="5">Aire Acondicionado</option>
                    <option value="6">Amplificador</option>
                    <option value="7">Antena</option>
                    <option value="8">Antena Poe</option>
                    <option value="9">Bases de Monitor</option>
                    <option value="10">Bluetooth</option>
                    <option value="11">Cable de Poder</option>
                    <option value="12">Cable USB</option>
                    <option value="13">Cable UTP</option>
                    <option value="14">Cables Conectores</option>
                    <option value="15">Camara de Fotos</option>
                    <option value="16">Camara de Video</option>
                </select>

               
            </div>

              <button onclick=" return getVal();">Get Selected Value</button>
        </div>
    </form>
</body>
<script>
    $(document).ready(function () {
        // $('select').chosen({ width: '100%' });
        var config = {
            '#id_tipo_equipo': {},
            '.chosen-select-deselect': { allow_single_deselect: true },
            '.chosen-select-no-single': { disable_search_threshold: 10 },
            '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
            '.chosen-select-width': { width: "95%" }
        }

        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
    });

    function getVal() {
        alert(document.getElementById("id_tipo_equipo").value);
        return false;
    }
</script>
</html>

-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Get all non-clustered indexes

DECLARE cIX CURSOR FOR     SELECT OBJECT_NAME(SI.Object_ID), SI.Object_ID, SI.Name, SI.Index_ID         FROM Sys.Indexes SI             ...