jquery中监控input文本框值的变化触发函数_jq 监听值变化后触发事件-优快云博客

本文链接：https://blog.youkuaiyun.com/a347911/article/details/50326731

本文介绍如何在项目开发中通过监听文本框输入变化，触发动态查询并实现实时数据更新，包括使用input元素的oninput事件、onpropertychange事件与AJAX请求相结合的方法，以及展示数据更新过程中的站点信息拼接与展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<input id="search" type="search" oninput="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("请求失败，请检查网络！");
            }
        }
    }); 
}

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