List search function of bootstrap

1. The content of this article is basically the same as the online tutorials due to the problems encountered in the actual work, but I didn't write the basic operation to solve the actual problems. Some specific codes are also online, so I don't want to write hahaha.

Operation steps

  1. jquery needs to be referenced
  2. bootstrap needs to be referenced
  3. css and js that need to reference bootstrap select
  4. Set the attribute class = "selectpicker bla bla bli" data Live Search = "true" of your actual code select to add to your select tag
    *Most of the examples are this class = "selectpicker bla bla bli" multiple data Live Search = "true" but multiple doesn't know what to use*
    5. setting
<script type="text/javascript">
        $(window).on('load', function () {
          //Set the select property in your code
            $('.selectpicker').selectpicker({
                // 'selectedText': 'cat' unnecessary code
            });
            // $('. selectpicker').selectpicker('hide '); unnecessary code
        }); 
    </script>

the-blockchain_-1200x630-c-ar1.91.jpg

Actual code

<!DOCTYPE html>
<html>

<head>
    <title>demo</title>
    <!-- Reference required first jquery -->
    <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>

    <!-- Need to quote bootstrap -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <!-- <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  -->

    <!-- Need to quote bootstrap-select  Of css And js -->
    <link href="css/bootstrap-select.css" rel="stylesheet">
    <script src="js/bootstrap-select.js"></script>

    <!-- Important js Code     among.selectpicker Namely select Class of labels  class="selectpicker bla bla bli" Plus data-live-search="true"   
         In the evening, most of the documents are here, but I haven't specified how to use them in practical applications. I'll adjust them for half a day
         In fact, it's a simple class="selectpicker bla bla bli"  data-live-search="true"   Join your select Label
    -->
    <!-- This code says your settings  select  Attribute  class="selectpicker bla bla bli"  data-live-search="true"   Join your select Label  -->


    <script type="text/javascript">
        $(window).on('load', function () {

            $('.selectpicker').selectpicker({
                // 'selectedText': 'cat' unnecessary code
            });

            // $('. selectpicker').selectpicker('hide '); unnecessary code
        }); 
    </script>
</head>

<body>
    <label for="id_select">Test label YEag</label>
    <!-- The general requirements are made in this way. If you need to study deeply, you need to study by yourself -->
    <select id="id_select" class="selectpicker bla bla bli" data-live-search="true">
        <option>cow</option>
        <option>bull</option>
        <option>ox</option>
        <!-- <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
            <option>ASD</option>
            <option selected>Bla</option>
            <option>Ble</option>
        </optgroup> -->
    </select>

    <div class="container">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="bs3Select" class="col-lg-2 control-label">Test bootstrap 3 form</label>
                <div class="col-lg-10">
                    <select id="bs3Select" class="selectpicker show-tick form-control" data-live-search="true">
                        <option>cow</option>
                        <option>bull</option>
                        <option class="get-class" disabled>ox</option>
                        <!-- This is the next part. Other effects -->
                        <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
                            <option>ASD</option>
                            <option selected>Bla</option>
                            <option>Ble</option>
                        </optgroup>
                    </select>
                </div>
            </div>
            <form>
    </div>
</body>

</html>

Give me some advice.

Tags: JQuery Javascript Attribute

Posted on Sat, 30 Nov 2019 05:34:49 -0800 by xgab