simple bootstrap form

practice.

by Hao Wu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/typeahead.js/releases/latest/typeahead.bundle.min.js"></script>
<div class="container">
    <div class="box">
        <div class="row row-offcanvas row-offcanvas-left">
            <!-- main right col -->
            <div class="column col-sm-10 col-xs-11" id="main">
                
                <!-- content -->
                <!-- 查詢 panel -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">權限管理</h3>
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal" role="form">
                            <!--<div class="well">-->
                            <!--<h1> 簽到退記錄查詢 </h1>-->
                            <!--</div>-->
                            <div class="form-group">
                                <label class="col-sm-3 control-label">身分證字號：</label>
                                <div class="col-sm-9">
                                    <div id="remote">
                                        <input class="typeahead" type="text" placeholder="請輸入" />
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">姓名：</label>
                                <div class="col-sm-9">
                                    <div class="input-group">
                                        <input type="text" class="form-control" readonly />
                                    </div>
                                </div>
                            </div>
                            <div...

JavaScript

var movies = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'Authorize',
        ajax: {
            type: 'POST',
            data: {
                action: 'quick_query'
                
            }
        },
        filter: function (movies) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(movies.results, function (movie) {
                return {
                    value: movie.original_title
                };
            });
        }
    }
});

// Initialize the Bloodhound suggestion engine
movies.initialize();

// Instantiate the Typeahead UI
$('#remote .typeahead').typeahead(null, {
    displayKey: 'value',
    source: movies.ttAdapter()
});