Html5+Mui前端框架,开发记录（四）：下拉菜单绑定数据、搜索、时间控件

1.下拉菜单绑定数据，选择后回传值

1）html:

    <div class="mui-input-row">
    <label>xxx：</label>
    <input id='zxyy' type="text" class="mui-input-clear mui-input" placeholder="请选择xxx">
    </div>

2)js:

 1           document.getElementById("zxyy").addEventListener('tap', function() {
                Selectzxyy();
            });

            function Selectzxyy() {
                var specModel = new mui.PopPicker(); //初始化 picker
                mui.ajax({
                    url: getAddress() + '/api/Hospital/get?jsoncallback=?',
                    data: {},
                    async: true,
                    dataType: 'json',
                    crossDomain: true, //强制使用5+跨域  
                    type: 'get',
                    timeout: 10000,
                    success: function(data) {
                        if (data.length > 0) {
                            var item = [];
                            for (var i = 0; i < data.length; i++) {
                                arrStr = {
                                    text: data[i].HospitalName,
                                    value: data[i].Id
                                };
                                item.push(arrStr);
                            }
                            specModel.setData(item);
                            specModel.show(function(item) {

                                var specModelName = item[0].text;
                                var t = document.getElementById('zxyy');
                                t.value = specModelName;
                                t.tabIndex = item[0].value;
                                var specModelValue = item[0].Id;
                            });
                        }
                    },
                    error: function(xhr, type, errorThrown) {}
                });
            }

2.时间控件

1）html:

                <div class="mui-input-row">
                            <label>日期：</label>
                            <input type="datetime" id="startdate" placeholder="请选择时间" onclick="dtime()">
                        </div>

2)js:

<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
<script src="js/mui.picker.min.js"></script>        

    function dtime() {
                var Date = new mui.DtPicker({
                    type: 'date'
                });
                var endDate = "";
                Date.show(function(item) {
                    //这里你可以用console 看看回调函数中的item的值                          
                    endDate = item;
                    var s = document.getElementById('startdate');
                    s.value = endDate.toString();
                });
            }

3.搜索

1）html：

1                  <div class="mui-indexed-list-search mui-input-row mui-search">
                
                     <input type="search" id="searchInput" onkeyup="enterSearch(event)" class="mui-input-clear" placeholder="关键字">
                    </div>

2）js：

function enterSearch(event){
            if(event.keyCode == 13) {//用户点击回车的事件号为13
                var keyword = document.getElementById('searchInput').value;                
        //createFragment(keyword);（自己的逻辑代码）
            }
        }