집 >
기사 > 웹 프론트엔드 > 입력 상자가 Baidu와 유사한 검색 프롬프트를 구현하도록 합니다(jquery 이벤트 모니터링 기반)_jquery
입력 상자가 Baidu와 유사한 검색 프롬프트를 구현하도록 합니다(jquery 이벤트 모니터링 기반)_jquery
WBOY원래의
2016-05-16 17:01:381291검색
아주 멋진 효과입니다. Baidu와 Google은 이 효과를 구현하는 코드를 인터넷에서 쉽게 찾을 수 있다고 생각했습니다. 실제로 이러한 요구 사항을 접했을 때 실제로는 찾을 수 없다는 것을 알았습니다. 그래서 이 효과를 전체 프레임워크에 통합했기 때문에 별도로 캡슐화하지 않았습니다.
요구 사항: 변경 사항이 있을 때 일반적으로 사용되는 키워드를 얻으려면 Baidu 검색과 유사한 프롬프트가 있는 입력 상자를 구현하세요. 데이터는 시스템 데이터베이스에서 가져오며 마우스 선택 또는 키보드 선택을 지원합니다.
아이디어: 프레임워크의 일관된 아이디어는 클래스를 모니터링 입구로 사용하고 데이터를 데이터 전송으로 사용하는 것입니다. 실시간 변경 모니터링은 입력 및 속성 변경 이벤트를 모니터링하여 달성됩니다. 주류, 속성 변경은 즉, 아시다시피 ; Ajax를 통해 게시 작업을 구현하고 반환된 콘텐츠를 선택 상자와 유사한 형태로 표시합니다. 위쪽 키(38), 아래쪽 키(40)를 모니터링합니다. , 키보드의 키 (13)을 입력하고 keydown을 바인딩하여 event.keycode 구현을 결정합니다. 키보드 동작과 완벽하게 통합되어야 하는 마우스 오버 및 클릭 이벤트를 모니터링합니다. 입력 콘텐츠 요구 사항은 알려진 옵션과 일치해야 하며, 흐림 이벤트를 모니터링하여 초점 변경이 허용되는지 확인하세요.
//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");
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.