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

秒速五厘米 2022-08-18 11:52 225阅读 0赞

在项目开发中我们经常需要监控文本框中值的变化去执行一个相对应的函数，比如说动态查询，文本框中值变化后自动调用ajax进行动态的查询。

<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("请求失败，请检查网络！");
                }
            }
        }); 
    }

以上红色代码就可以实现当文本框中的值变化时，执行动态的查询。