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

HTML页面代码：

在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([]);
        }
    });
}
//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
    });
});