입력을 기반으로 한 동적 퍼지 쿼리

이번에는 입력 기반 동적 퍼지 쿼리를 소개해 드리겠습니다. 입력 기반 동적 퍼지 쿼리의 주의 사항은 무엇인가요? 다음은 실제 사례입니다.

최근 jQuery를 사용하여 동적 퍼지 쿼리를 구현할 때, 오랫동안 검색했지만 Vue.js의 watch 속성만큼 사용하기 쉬운 동적 퍼지 쿼리 방법을 찾을 수 없었습니다. 지금까지 겪은 함정과 동적 쿼리를 구현하는 여러 가지 방법을 공유하겠습니다.

1. jQuery의 Change() 메소드.

이 방법은 입력 상자의 초점을 잃을 때만 이벤트를 실행합니다. 이 방법에 대해 완전히 익숙하지 않은 것일 수도 있습니다. 몇 가지 팁을 공유해 보세요.

<input type="text" id="n3"/>
var $n3=$("#n3);//定位到input框
$n3.change(function(){
 this.query_search($n3.val());//query_search为模糊查询的方法
})

change()function은 핸들러 함수를 일치하는 각 요소의 변경 이벤트에 바인딩하는 데 사용됩니다. 이 함수는 변경 이벤트를 트리거하는 데에도 사용할 수 있습니다. 또한 이벤트 핸들러 함수에 몇 가지 추가 데이터를 전달할 수도 있습니다. 텍스트 내용이나 옵션이 변경되면 변경 이벤트가 트리거됩니다. 이 이벤트는 및 에만 적용됩니다. 텍스트 및 텍스트 영역 요소의 경우 이 이벤트는 요소가 포커스를 잃을 때 발생합니다(텍스트 내용도 변경됨). 또한 동일한 요소에 대해 이 함수를 여러 번 호출하여 여러 이벤트 핸들러를 바인딩할 수 있습니다. Change 이벤트가 발생하면 jQuery는 바인딩된 순서대로 바인딩된 이벤트 처리 함수를 실행합니다. Change()를 통해 바인딩된 이벤트를 <a href="http://www.php.cn/php/php-tp-remove.html" target="_blank">삭제</a>하려면 unbind() 함수를 사용하세요. </p> <p style="text-align: left;"><span style="color: #ff0000"><strong>2. JQuery의 keyup 또는 keydown 이벤트를 수신합니다.</strong></span></p> <p style="text-align: left;">이 메서드는 각 키의 트리거 이벤트를 모니터링할 수 있으며, 누를 때마다 퍼지 쿼리 메서드를 응답 이벤트에 바인딩할 수 있습니다. 이벤트가 발생하지만 그렇게 하면 데이터베이스에 대한 부담이 크게 증가합니다. 이를 운영하는 사람이 많고 캐시가 없으면 데이터베이스가 몇 분 안에 폭발합니다. </p> <pre class="brush:php;toolbar:false"><input type="text" id="#n3"/> var $n3=$("#n3");//定位到input框 $n3.keyup(function(){  this.query_search($n3.prop("value"));//query_search为模糊查询的方法  })</pre> <p style="text-align: left;"><span style="color: #ff0000"><strong>3. Vue.js의 watch 속성 관찰자 방법을 사용하세요. </strong></span></p> <p style="text-align: left;">이 메서드는 입력 상자의 속성 변경을 동적으로 관찰할 수 있으며, 입력 상자의 값이 변경되는 한 응답 메서드가 동적으로 호출됩니다. </p> <p style="text-align: left;"><img alt="" src="https://img.php.cn/upload/article/000/061/021/84e9b310e3606fcc6e019fe5cdef3fd1-0.png"></p> <p style="text-align: left;"><img alt="" src="https://img.php.cn/upload/article/000/061/021/84e9b310e3606fcc6e019fe5cdef3fd1-1.png"></p> <p style="text-align: left;"><img alt="" src="https://img.php.cn/upload/article/000/061/021/84e9b310e3606fcc6e019fe5cdef3fd1-2.png"></p> <p style="text-align: left;"><img alt="" src="https://img.php.cn/upload/article/000/061/021/2acd563ed2e5a22206f68fcc47964321-3.gif"></p> <p style="text-align: left;"><span style="background-color: #ccffcc"><strong>마지막으로 언급할 가치가 있는 것은 입력 텍스트 상자에서 값을 얻는 세 가지 방법이 있다는 것입니다.</strong></span></p> <p style="text-align: left;">1. ") . 이 방법은 기본 값만 얻을 수 있습니다. 즉, CSS 코드에 원래 정의된 값은 페이지가 처음 표시될 때 동일한 값이 되며 이 값은 변경되지 않습니다. </p> <p style="text-align: left;">2.prop("value")를 통해 획득합니다. 이 방법을 사용하면 기본값은 물론 변경된 값도 얻을 수 있습니다. 변경하기만 하면 얻을 수 있습니다. </p> <p style="text-align: left;">3.val()을 통해 얻습니다. 이는 prop("value")와 비슷한 느낌입니다. </p> <p style="text-align: left;">4. Vue.js의 v-model 바인딩을 사용하여 얻을 수도 있으므로 4가지 방법으로 계산됩니다. </p> <p style="text-align: left;">이러한 내용은 여러 테스트를 통해 도출된 개인적인 결론입니다. 권위있는 진술은 없습니다. 실수가 있으면 누군가가 제때에 수정해 주기를 바랍니다. </p> <p>이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! </p> <p>추천 자료: </p> <p><a href="http://www.php.cn/js-tutorial-388709.html" target="_blank">jquery로 변환 값을 얻는 방법</a><br></p> <p><a href="http://www.php.cn/js-tutorial-388707.html" target="_blank">여러 AJAX를 함께 요청하고 기다리는 방법</a><br></p> <p><a href="http://www.php.cn/js-tutorial-388704.html" target="_blank">팝업 창에서 하단 페이지 슬라이딩 비활성화</a><br></p><p>위 내용은 입력을 기반으로 한 동적 퍼지 쿼리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="jquery에서 변환 값을 얻는 방법" href="http://m.php.cn/ko/faq/388709.html">jquery에서 변환 값을 얻는 방법</a></span><span>다음 기사：<a class="dBlack" title="jquery에서 변환 값을 얻는 방법" href="http://m.php.cn/ko/faq/388712.html">jquery에서 변환 값을 얻는 방법</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="深入浅析Bootstrap列表组组件" class="aBlack">深入浅析Bootstrap列表组组件</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript函数柯里化详解" class="aBlack">JavaScript函数柯里化详解</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS密码生成与强度检测完整实例(附demo源码下载)" class="aBlack">JS密码生成与强度检测完整实例(附demo源码下载)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs整合微信UI（weui）" class="aBlack">Angularjs整合微信UI（weui）</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧" class="aBlack">JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>