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

最新推荐文章于 2022-10-23 13:40:08 发布

ClareQi

最新推荐文章于 2022-10-23 13:40:08 发布

阅读量1.4k

点赞数

文章标签： appcan oninput 搜索

本文链接：https://blog.csdn.net/clareqi/article/details/52510507

版权

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" οninput="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
    });
});