您的位置：首页 > 移动开发

appCan开发：oninput实现动态请求搜索功能例子

2016-09-12 08:52 537 查看
HTML页面代码：

<body class="um-vp bc-bg" ontouchstart>
    <div class="umar-a ub ub-ac ub-f1">
        <div class="ub-f1">
            <div class="uinput ub ub-f1 bc-border uba">
                <input placeholder="请输入姓名" id="searchEmploy" type="search" class="ub-f1" oninput="searchRequest()">
                <div class="uinn fa fa-search sc-text"></div>
            </div>
        </div>
    </div>
   
    <div id="treeview">
    </div>
    <div id="employ_treeview">
    </div>
    <div id="search_listview">
    </div>
    <script src="js/appcan.js"></script>
    <script src="js/appcan.control.js"></script>
    <script src="js/appcan.listview.js"></script>
    <script src="js/appcan.treeview.js"></script>
    <script src="app_js/BP.js"></script>
    <script src="app_js/indexCon_3.js"></script>     
    </body>
在id=searchEmploy的input标签中输入内容，即value值，通过oninput方法来触发JS事件。

oninput事件是在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；

JS代码：我这个例子是一个通讯录案例，在窗口本来有两个treeview的，顶端有一个搜索input,当聚焦到input时，隐藏两个treeview,失去焦点时，如果input中没有值，就显示这两个treeview。（类似手机通讯录上面的搜索）

function searchRequest(){
var l=$("#searchEmploy").val().length;//判断input中是否有内容
if (l == 0) {    //input无内容时，显示treeview和empoly_treeview,并且将lv_search置空
$("#treeview").show();
$("#employ_treeview").show();
lv_search.set([]);
}
else{
$("#treeview").hide(); //隐藏treeview和employ_treeview
$("#employ_treeview").hide();
lv_search.set([]); //每次请求时，也要置空lv_search，防止数据重叠呈现，产生冗余

appcan.request.ajax({    //ajax来请求数据，url就是后台请求的服务器RequestMapping中的url(我的服务器后台使用的SSM框架)
type : 'post',
url : ajaxUrlHead + "employees/searchMobile",
data : {
"searchText" : $("#searchEmploy").val()
},
dataType : "json",
timeout : 10000, //超时时间
success : function(data) {
//console.log(data[i].name);
console.log(data);
for (var i = 0; i < data.length; i++) {
console.log(data[i].name);
lv_search.add([{              //通过add方法给lv_search列表中动态添加数据
title : data[i].name,
p_id : data[i].id,
icon : accountAvatar + data[i].img,
pagename : "uexWheel",
pageurl : "uexWheel.html"
}], 1);
}
}
});
}
$("#searchEmploy").blur(function() {   //当input失去焦点时，如果input中无数据（表示这时候搜索操作结束），置空lv_search，将前两个treeview显示出来
var l=$("#searchEmploy").val().length;
if(l==0){
$("#treeview").show();
$("#employ_treeview").show();
lv_search.set([]);
}
});
}<pre name="code" class="html">//lv_search列表每一项的点击事件绑定，每点击一次，把列表项的id存储下来，以便后续页面处理时，知道是点击了列表的哪一项
lv_search.on('click', function(ele, data, obj) {
  console.log(data.p_id); appcan.locStorage.setVal("p_employId",data.p_id);
  //appcan.locStorage.setVal("p_deptName",data.title);
  appcan.window.open({
name : "per_info",
      data : "per_info.html",
      aniId : 2
    });
});


</pre><pre>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                appcan
                                                oninput
                                                搜索
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航