jquery中监控input文本框值的变化触发函数

在项目开发中我们经常需要监控文本框中值的变化去执行一个相对应的函数,比如说动态查询,文本框中值变化后自动调用ajax进行动态的查询。
<input id="search" type="search" οninput="changeVale(this.value)" onpropertychange="changeVale(this.value)" placeholder="网点搜索">
<pre name="code" class="javascript"><script type="text/javascript"><span style="color:#ff0000;">
</span>
<span style="color:#ff0000;">function changeVale(textValue){
		searchBike(textValue)
	}</span>
	
	//ajax传值实时查询方法
	function searchBike(textValue){
	var keyWord = textValue;
	 doGet(g_wssturl + "RXWSSTWeb/publicBicycle.web?getNearGgzxcList", {lontitude:113.300854,latitude:22.810388,keyWord:keyWord,pageIndex:0},function(data){
         if(data.success) {
        	 var obj = jQuery.parseJSON(data.obj);
        	 bikeStationList(obj);
         }
     }, null, "jsonp");
	}
	
	//站点拼接方法
	 function bikeStationList(data){
		 var bikeHtml = "";
		 var list = $("#bikeStationList");
		 if(data !="" && data.length>0){
			 for(var i=0;i <data.length;i++){
				 bikeHtml+='<li class="mui-table-view-cell mui-media"><a href="javascript:;"><table><tr><th class="text-lve">'+data[i].PARK_NAME+'</th></tr>';
				 bikeHtml+='<tr><td class="text-lve">地址:'+data[i].PARK_ADDR+'</td><td style="text-align: center;"><a href="" class="pic_qiu" style=""><img src="images/wechat/pic_qiu.png" width="30"></a></td></tr>';
				 bikeHtml+='<tr><td><u>可借:'+data[i].NUM1+'</u><u>可停:'+data[i].NUM2+'</u><u>异常:'+data[i].NUM3+'</u></td><td style="text-align: center;">'+data[i].D+'km</td></tr></table></a></li>';
				 list.html(bikeHtml);
			 }
		 }
		 list.html(bikeHtml);
	 }
</script>

 
/**
 * 异步Get请求(通用请求,响应json或jsonp数据)
 * 简单传参用法:doGet(url, success)
 * @param {String} url 请求url
 * @param {Object} data 请求数据
 * @param {Function} success 成功回调
 * @param {Function} error 出错回调
 * @param {String} dataType 返回数据类型
 */
function doGet(url, data, success, error, dataType){
   if(dataType=="jsonp"){
       var param = "&";
       if(url.indexOf("?")<0){
           param = "?";
       }
       param += parseParam(data);
       
       url += param;//jsonp只支持GET,所以参数追加url后
       data = {};
   }else{
       dataType=="json";
   }

   $.ajax({
        url : url,
        type : 'GET',
        timeout: 30000,
        data : data,
        dataType : dataType,
        jsonp : 'jsonpcallback',
        success : function(result,status,requestCode) {
            console.log("result="+result);
            if(typeof data =="function"){
                data(result);
            }if(typeof success =="function"){
                success(result);
            }
        },
        error : function(xhr, errorType, error, msg) {
            if(typeof error =="function"){
                error(msg);
            }else{
            	console.log("xhr:"+JSON.stringify(xhr));
            	console.log("errorType:"+errorType);
            	console.log("error:"+error);
            	console.log("msg:"+msg);
               alert("请求失败,请检查网络!");
            }
        }
    }); 
}
以上红色代码就可以实现当文本框中的值变化时,执行动态的查询。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值