今天在实现后台已经封装号的模糊查询接口的搜索效果时,我想要实现的效果是,搜索input在软键盘输入完成点击“搜索”,发送http请求。
此要求就需要实现软键盘键值的监听与获取。在网上搜索结果(http://www.jb51.net/article/119743.htm)后自己试验成功。
先贴出自己的代码,供参考。
html:
<header id ="mheader" ng-controller = "minquiryctrl">
<input type="search" id="msearch" placeholder = "搜索" ng-model = "mminquiry" ng-keyup = "forSearch($event)">
<i id="search"><img src="./images/index/title_icon_search.png" alt=""></i>
<div id="clock"><img src="./images/index/title_icon_history.png" alt=""></div>
<!---->
</header>
js:
//查询部分的数据填充
var minquirys = angular.module("minquiry",[]);
minquirys.controller("minquiryctrl",function($scope,$http){
$scope.forSearch = function($event){
console.log("------------------------------------------");
console.log("搜索事件开启");
console.log("搜索参数"+$scope.mminquiry);
var marg = $scope.mminquiry;
var mjson = {
"action": "XXX",
"param": {
"wikiName": marg,
"tag": "",
"page": 1,
"pagesize": 8
}
}
var keycode = $event.keyCode;
if(keycode===13){
$http({
method:'post',
url:"/Epg",
data:mjson,
}).then(function(data){
console.log("请求发送成功");
$scope.hotvideos = data.data.wikis;
alert($scope.hotvideos);
}).catch(function(){
alert("数据呢?");
});
}
}
});
angular.bootstrap(document.getElementById("mheader"), ['minquiry']);
更多的方案请查看我上面复制的链接。我只试了第一种方案。