daterangepicker插件、autocomplete插件

daterangepicker插件

官方文档

引入js，css

<link href="https://cdn.bootcss.com/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-daterangepicker/3.0.5/moment.min.js"></script>

代码

<input class="date1" name="date1" placeholder="请输入一个日期" /><br>

//js
$('.date1').daterangepicker({
            "startDate": "09/14/2019",
            "endDate": "09/20/2019",
            "maxSpan":{
                "days":5
            }
        }, function (start, end, label) {
            console.log(`New date range selected: ${start.format('YYYY-MM-DD')} to ${end.format('YYYY-MM-DD')}`);
        });

属性：minDate、maxDate

showDropdowns、minYear、maxYear

maxSpan

 timePicker

 timePicker24Hour、timePickerSeconds、ranges、showCustomRangeLabel、alwaysShowCalendars、locale

autocompleter插件

引入js，css

<link href="./css/jquery.autocompleter.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/jquery.autocompleter.js"></script>

代码

<input name="autocompleted" id="autocompletedInput" placeholder="请输入值自动匹配" />

var data = [
            { "value": "1", "label": "one" },
            { "value": "2", "label": "two" },
            { "value": "3", "label": "three" },
            { "value": "4", "label": "one" },
            { "value": "5", "label": "one" },
            { "value": "6", "label": "one" }
        ];
        $("#autocompletedInput").autocompleter({
            // marker for autocomplete matches
            //highlightMatches: true,

            // object to local or url to remote search
            source: data,

            // show hint
            //hint: true,

            // abort source if empty field
            //empty: false,

            // max results
            limit: 3,
        });

效果

                                

jquey-autocomplete

引入js，css

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-ui-bootstrap/0.5pre/js/jquery-ui-1.9.2.custom.min.js"></script>
<link href="https://cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery-autocomplete/1.0.7/jquery.auto-complete.min.js"></script

代码

<input type="text" name="country" id="autocomplete" />

$(function () {
        var countries = [
            { value: 'Andorra', data: 'AD' },
            { value: 'China', data: 'Ch' },
            { value: 'American', data: 'AM' },
            { value: 'Juripan', data: 'JP' },
            { value: 'Zimbabwe', data: 'ZZ' }
        ];

        $('#autocomplete').autocomplete({
            lookup: countries,
            source: countries,
            onSelect: function (suggestion) {
                alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
            }
        });
    })  

效果