@{
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
    var pageObj = new
    {
        clients = JsDataModel.GetClients()
    };
}

<div class="yc-panel">
    <h3>客户自动完成输入</h3>
    <hr />
    <div class="form-group">
        <label class="formlabel">客户名称</label>
        <input type="text" id="input1" placeholder="选择客户" />
    </div>
    <div class="form-group">
        <label class="formlabel">客户ID</label>
        <span id="clientIdShow"></span>
    </div>
</div>

<div class="yc-panel">
    <h3>客户多选</h3>
    <hr />
    <div class="form-group">
        <label class="formlabel" placeholder="选择客户">客户名称</label>
        <select id="select2" class="selectpicker">
            @foreach (var item in pageObj.clients)
            {
                <option value="@(item.id)">@(item.Name)</option>
            }
        </select>
    </div>
    <div class="form-group">
        <label class="formlabel">客户ID</label>
        <span id="clientIdShow2"></span>
    </div>
</div>

@section JS{
    <script>

        const pageObj = @Json.Serialize(pageObj);

        var clientInputCtrl;

        $(function () {

            //客户输入控件
            clientInputCtrl = FastVue.autocomplete('input1', {
                nameField: 'Name',
                valueField: 'id',
                searchField: ['Name', 'PinYin'],//如果不设置则只搜索nameField
                lookup: pageObj.clients,
                onSelect(data) {
                    $('#clientIdShow').text(data.id);
                }
            });

            clientInputCtrl.setData(pageObj.clients[0]);

            $('.selectpicker').val('').selectpicker({
                liveSearch: true,
                selectAllText: '全选',
                deselectAllText: '全不选',
                actionsBox: true
            }).on('change', function () {
                $('#clientIdShow2').text($('#select2').val());
            });

            //$('.selectpicker').selectpicker('val', '');
            //$('.selectpicker').selectpicker('refresh');
        });

    </script>
}