Let the input box implement a search prompt similar to Baidu (based on jquery event monitoring)_jquery

A very cool effect. Baidu and Google seem to have implemented it for many years. I thought I could easily find the code to achieve this effect on the Internet. When I really encountered this need, I found that I really couldn’t find it. So I wrote this effect myself. Since I integrated the effect into my entire framework, I did not encapsulate it separately.

Requirements:
Implement an input box with prompts, similar to Baidu search, to obtain commonly used keywords when there are changes. The data comes from the system database and supports mouse selection or keyboard selection

Idea:
The consistent idea of ​​the framework is to use class as the monitoring entrance and data as the data transmission;
Real-time change monitoring is achieved by monitoring input and propertychange events. Input is the mainstream, propertychange is ie, you know ;
Implement the post action through ajax, and display the returned content in a form similar to a selection box;
Monitor the up key (38), down key (40), and enter key (13) of the keyboard, and bind keydown , determine the event.keycode implementation;
Monitor the mouseover and click events of the mouse, which must be perfectly integrated with the keyboard actions;
If the input content requirements must be consistent with the known options, monitor the blur event to determine whether focus change is allowed;

Implementation code:

Copy code The code is as follows:

//By COoL

//Define global variables to store the prompt layer
var liketips;

//Listen for changes or get focus events

//Disable the automatic prompts that come with Chrome and Firefox browsers
$('.getsearchjson').attr("autocomplete", "off");
$('.getsearchjson').bind( "propertychange input focus",function(event){
$this=$(this);
if(event.type!='focus'){
//If there is a change, the status is set to It must be selected again, because pure manual input will cause the value to be unable to be inserted
$this.data('ok',false);
}

//Get the input box position and calculate the prompt layer should appear Position
var top=1*$this.offset().top 25;
var left=1*$this.offset().left;
var width=1*$this.width( ) 12;

//Rebuild the storage tip layer and display it in the appropriate position
$(liketips).remove();
liketips=document.createElement('div');
$liketips=$(liketips);
//class style is not provided here, the most important thing is position:absolute
$liketips.addClass("liketips");
$liketips.css({top: top 'px',left:left 'px',width:width 'px'});

//Display the loading dynamic image before loading
$liketips.append('');
$liketips.appendTo($this.parent());
$liketips.show();

//Define ajax to obtain json, the type parameter is set through data-type, and the keyword is the value that has been entered so far
//The return value is displayed in table form
$.post('/data/search.do ',{type:$this.data('type'),keyword:$this.val()},function(json){
$liketips.empty();
var htmlcode="";
for(var i=0;i //I need to use value here and title, so use data-value to pass one more parameter, and assign the value to the corresponding place after pressing Enter or mouse click, which perfectly replaces select
htmlcode =''; ;/tbody>

' json.datas[i][1] '

Please be sure to select" in this drop-down box;
//Replace the loading dynamic image with content
$liketips.html(htmlcode) ;
},"json");
});

//When the focus disappears, make sure the data comes from the option and hide the prompt box
$('.getsearchjson').blur( function(){
//Because the blur action is settled before the click when the mouse is clicked, setTimeout is to solve this problem
$oldthis=$(this);
setTimeout(function(){
if ($oldthis.data('ok'))
                $(liketips)                                                                                                                                                                 One item, thank you for your cooperation');
                       $oldthis.focus();                      );

//Monitor keyboard actions
$('.getsearchjson').keydown(function(event){
//console.log(event.keyCode);
$this =$(this);
if(event.keyCode==40){
//The key is down
$nowtr=$('tr.selectedtr');
//If it has been If there is selection, go down, otherwise, select the first
in the menu if($nowtr.length>0){
$nexttr=$nowtr.next('tr')
The last option, move to the next tr, otherwise jump to the first tr
                                                                             .addClass('selectedtr');
                                               ; tr:first' ).addClass('selectedtr');
                                    ; 🎜>                                                                                                                 If already selected, go down, otherwise, select the first
in the menu if($nowtr.length>0){
$prevtr=$nowtr.prev('tr')
//If It is not the last option, move to the next tr, otherwise jump to the first tr
                                                                                                                prevtr.addClass ('selectedtr'); ('tr:last ').addClass('selectedtr');
                                                        ;
                                                                                                                                               selectedtr');
if($nowtr.length==1){
//Set the value to the value storage item configured by the input box through the parameter data-valueto, usually the hidden item
$valuefield=$('input[name=' $this.data('valueto') ']');
           $valuefield.val($nowtr.data('value')); val($nowtr.text());
                                                                                                                                     ).fadeOut('fast');
       return false;
    }
//console.log(event.keyCode);
return true;
});

//Listen to mouse movements, mouseover changes the selected item
$(document). delegate('.liketips td','mouseover',function(){
$nowtr=$(this).parent();
$nowtr.siblings('tr').removeClass();
$nowtr.addClass('selectedtr');
});

//Listen to mouse movements, click to select
$(document).delegate('.liketips td','click ',function(){
$nowtr=$(this).parent();
if($nowtr.length==1){
//Get the input box corresponding to the prompt layer
$ InputField = $ nowtr.parent (). Parent (). Parent (). Siblings ('Input.getsearchjson'); lue The value is stored in the item, usually the hidden item
$valuefield=$('input[name=' $inputfield.data('valueto') ']');
$valuefield.val($nowtr.data ('value'));
$inputfield.val($nowtr.text());
$inputfield.data('ok', true);
}
$(liketips).fadeOut('fast');
});



The CSS will not be released here. My implementation is as follows:

Copy code The code is as follows: //Disable the automatic prompts that come with chrome and firefox browsers

$this.attr("autocomplete","off");