입력 상자가 Baidu와 유사한 검색 프롬프트를 구현하도록 합니다(jquery 이벤트 모니터링 기반)_jquery

아주 멋진 효과입니다. Baidu와 Google은 이 효과를 구현하는 코드를 인터넷에서 쉽게 찾을 수 있다고 생각했습니다. 실제로 이러한 요구 사항을 접했을 때 실제로는 찾을 수 없다는 것을 알았습니다. 그래서 이 효과를 전체 프레임워크에 통합했기 때문에 별도로 캡슐화하지 않았습니다.

요구 사항:
변경 사항이 있을 때 일반적으로 사용되는 키워드를 얻으려면 Baidu 검색과 유사한 프롬프트가 있는 입력 상자를 구현하세요. 데이터는 시스템 데이터베이스에서 가져오며 마우스 선택 또는 키보드 선택을 지원합니다.

아이디어:
프레임워크의 일관된 아이디어는 클래스를 모니터링 입구로 사용하고 데이터를 데이터 전송으로 사용하는 것입니다.
실시간 변경 모니터링은 입력 및 속성 변경 이벤트를 모니터링하여 달성됩니다. 주류, 속성 변경은 즉, 아시다시피 ;
Ajax를 통해 게시 작업을 구현하고 반환된 콘텐츠를 선택 상자와 유사한 형태로 표시합니다.
위쪽 키(38), 아래쪽 키(40)를 모니터링합니다. , 키보드의 키 (13)을 입력하고 keydown을 바인딩하여 event.keycode 구현을 결정합니다.
키보드 동작과 완벽하게 통합되어야 하는 마우스 오버 및 클릭 이벤트를 모니터링합니다. 입력 콘텐츠 요구 사항은 알려진 옵션과 일치해야 하며, 흐림 이벤트를 모니터링하여 초점 변경이 허용되는지 확인하세요.

구현 코드:

코드 복사 코드는 다음과 같습니다.

//COoL

//프롬프트 레이어를 저장할 전역 변수 정의
var liketips

//변경 사항 수신 또는 포커스 이벤트 가져오기

//Chrome 및 Firefox 브라우저와 함께 제공되는 자동 프롬프트 비활성화
$('.getsearchjson').attr("autocomplete", "off")
$('.getsearchjson').bind ( "propertychange input focus",function(event){
$this=$(this);
if(event.type!='focus'){
//변경사항이 있으면 상태는 다시 선택해야 합니다. 순수 수동 입력으로 인해 값을 삽입할 수 없기 때문입니다.
$this.data('ok',false)
}

/ /입력 상자 위치를 가져와서 프롬프트 레이어가 나타나야 하는지 계산합니다. Position
var top=1*$this.offset().top 25
var left=1*$this.offset().left; 🎜> var width=1*$this.width( ) 12;

//저장소 팁 레이어를 다시 작성하고 적절한 위치에 표시
$(liketips).remove(); liketips=document.createElement('div');
$liketips=$(liketips);
//여기서는 클래스 스타일이 제공되지 않습니다. 가장 중요한 것은 position:absolute입니다.
$liketips.addClass( "liketips");
$liketips.css({top: top 'px',left:left 'px',width:width 'px'})

//로드 중인 동적 이미지 표시 로딩 전
$liketips.append('')
$liketips.appendTo($this.parent()) ;
$liketips.show();

//json을 얻기 위해 ajax를 정의하고, type 매개변수는 data-type을 통해 설정하며, 키워드는 지금까지 입력한 값입니다
//반환값은 테이블 형식으로 표시됩니다
$.post('/data/search.do ',{type:$this.data('type'),keyword:$this.val()},function (json){
$liketips.empty();
var htmlcode=""
for(var i= 0;i //여기서 value와 title을 사용해야 하므로 data-value를 사용하여 매개변수를 하나 더 전달하고 Enter 키를 누른 후 해당 위치에 값을 할당하거나 select
htmlcode ='' 를 완벽하게 대체하는 마우스 클릭 '; ;/tbody>드롭다운 상자에서"을 선택하세요.
//로딩 교체 콘텐츠가 포함된 동적 이미지
$liketips.html(htmlcode) ;
},"json")
})

//포커스가 사라지면 데이터가 다음 위치에서 나오는지 확인하세요. 옵션을 설정하고 프롬프트 상자를 숨깁니다
$('.getsearchjson').blur( function(){
//마우스를 클릭할 때 클릭하기 전에 흐림 동작이 해결되므로 setTimeout은 이 문제를 해결합니다. $ OldThis = $ (this); settimeout (function () {
if ($ OldThis.Data ( 'OK'))
$ (liketips), 협력 해 주셔서 감사합니다. ');
                      $oldthis.focus();                  );

//키보드 동작 모니터링
$('.getsearchjson').keydown(function(event){
//console.log(event.keyCode);
$this =$(this);
if(event.keyCode==40){
//키가 눌려졌습니다
$nowtr=$('tr.selectedtr')
//그렇다면 선택 항목이 있으면 아래로 이동하고, 그렇지 않으면 메뉴에서 첫 번째
를 선택합니다. if($nowtr.length>0){
$nexttr=$nowtr.next('tr')
마지막 옵션으로 다음 항목으로 이동하고 그렇지 않으면 첫 번째 항목으로 이동합니다.
                                                                     .addClass('selectedtr')                                          ; 경우 이미 선택되어 있으면 아래로 내려갑니다. 그렇지 않으면 메뉴에서 첫 번째
를 선택합니다. if($nowtr.length>0){
$prevtr=$nowtr.prev('tr')
//If 마지막 옵션이 아닌 다음 항목으로 이동하고 그렇지 않으면 첫 번째 항목으로 이동합니다.
                                                                                   > 선택됨)
;
                                                                                                                         selectedtr')
if($nowtr.length==1){
//data-valueto 매개변수를 통해 입력 상자에서 구성한 값 저장 항목에 값을 설정합니다. 일반적으로 숨겨진 값입니다. item
$valuefield=$('input[name=' $this.data('valueto') ']')
            $valuefield.val($nowtr.data('value')); $nowtr.text())
                                                                                                                              ).fadeOut('fast')
       return false;
//console.log(event.keyCode);
return true;
})

//마우스 움직임을 듣고, 마우스를 올리면 선택한 항목이 변경됩니다.
$(document ).delegate('.liketips td','mouseover',function(){
$nowtr=$(this).parent();
$nowtr.siblings('tr').removeClass();
$nowtr.addClass('selectedtr');
});

//마우스 움직임을 듣고 클릭하여 선택
$(document).delegate('.liketips td' ,'click',function(){
$nowtr=$(this).parent();
if($nowtr.length==1){
//에 해당하는 입력 상자를 가져옵니다. 프롬프트 레이어
$ InputField = $ nowtr.parent ().Parent ().Siblings ('Input.getsearchjson'); 값은 일반적으로 숨겨진 항목
$valuefield에 저장됩니다. =$('input[name=' $inputfield.data('valueto') ']');
$valuefield.val($nowtr.data ('value'))
$inputfield.val( $nowtr.text());
$inputfield.data('ok', true)
}
$(liketips).fadeOut('fast'));



여기서 CSS는 공개되지 않습니다.

코드 복사

코드는 다음과 같습니다: //크롬 및 파이어폭스 브라우저와 함께 제공되는 자동 프롬프트를 비활성화합니다$this.attr("autocomplete","off");