input and propertychange methods for instant search

When doing the search function, I often encounter the need to check the input box. The most common one is instant search, so I will summarize it today.

Solutions for instant search:

(1) change event The trigger event must meet two conditions:

 

a) The current object property changes and is triggered by keyboard or mouse events (script triggering is invalid)

b) The current object loses focus (onblur)

 (2) keypress Well, okay. . . . . That is, he can monitor keyboard events, and he can't do anything about copying and pasting with the mouse. . . . .

 (3) propertychange (ie) and input events

Input is a standard browser event, which is generally applied to the input element. When the value of the input changes, it will occur. Whether it is keyboard input or mouse paste changes, the changes can be monitored in time.

 

propertychange, whenever the current object property changes.

For example, a drop-down box appears after entering text, as shown in the figure:

When the content in the input box is empty, the drop-down box needs to be hidden, which can be achieved through the input and propertychange methods. The code is as follows:

 

[javascript] view plaincopy    

1. <script>  
2. $("#search").bind("input propertychange",function(){  
3.     var value=$(this).val();  
4.     if(value){  
5.         $(".pc_search ul").show();  
6.     }else{  
7.         $(".pc_search ul").hide();  
8.     }  
9. });  
10. </script>  

Here bind binds both input and propertychange methods.

 

======================================================

Notice:

As of jQuery 1.7, on()functions provide all the functionality needed to bind event handlers and are used to uniformly replace the previous event functions such as bind(), delegate(), live(), etc.

 

// jQuery 1.0+ (1.4.3+ supports parameter data) 
$ ( "selector" ). click ( [ data ,] handler );

// jQuery 1.0+ (1.4.3+ supports parameter data) 
$ ( "selector" ). bind ( "click" [, data ], handler );

// jQuery 1.3+ (1.4+ supports parameter data) 
$ ( "selector" ). live ( "click" [, data ], handler );

// jQuery 1.4.2+
$("ancestor").delegate("selector","click"[, data ], handler );

// jQuery 1.7+
$("ancestor").on("click","selector"[, data ], handler );

 

Project use:

$("#buildYear").on('input propertychange',function () {
        var value=$(this).val();
if(value>=1900&&value<=2017){
            $("a.ssq-error.buildYear").css({"padding-left":"0px"});
$("a.ssq-error.buildYear").html("");
$("#evaluate").removeAttr("disabled");
}else{
            $("a.ssq-error.buildYear").css({"padding-left":"12px"});
$("a.ssq-error.buildYear").html("年代取值范围：1900-2017");
}
});