Dynamische Fuzzy-Abfrage basierend auf der Eingabe

Dieses Mal werde ich Ihnen dynamische Fuzzy-Abfragen basierend auf Eingaben vorstellen. Was sind die Vorsichtsmaßnahmen für dynamische Fuzzy-Abfragen basierend auf Eingaben? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Als ich kürzlich jQuery zur Implementierung dynamischer Fuzzy-Abfragen verwendet habe, habe ich lange gesucht, konnte aber keine dynamische Fuzzy-Abfragemethode finden, die so einfach zu verwenden ist wie das Watch-Attribut von Vue.js . Lassen Sie mich die bisher aufgetretenen Fallstricke und verschiedene Möglichkeiten zur Implementierung dynamischer Abfragen erläutern.

1. jQuerys change()-Methode.

Wenn diese Methode den Fokus des Eingabefelds verliert, wird das Ereignis ausgelöst. Es kann auch sein, dass ich nicht vollständig bin Wenn Sie mit dieser Methode vertraut sind, hoffe ich, dass jemand, der sie kennt, einige Tipps zur Verwendung geben kann.

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

change()Funktion wird verwendet, um eine Handlerfunktion an das Änderungsereignis jedes übereinstimmenden Elements zu binden. Diese Funktion kann auch zum Auslösen von Änderungsereignissen verwendet werden. Darüber hinaus können Sie auch einige zusätzliche Daten an die Funktion Ereignishandler übergeben. Das Änderungsereignis wird ausgelöst, wenn der Textinhalt oder die Optionen geändert werden. Dieses Ereignis gilt nur für und . Bei Text- und Textarea-Elementen tritt dieses Ereignis auf, wenn das Element den Fokus verliert (der Textinhalt ändert sich ebenfalls). Darüber hinaus können Sie mehrere Ereignishandler binden, indem Sie diese Funktion mehrmals für dasselbe Element aufrufen. Wenn das Änderungsereignis ausgelöst wird, führt jQuery die gebundenen Ereignisverarbeitungsfunktionen in der Reihenfolge der Bindung aus. Um ein über change() gebundenes Ereignis <a href="http://www.php.cn/php/php-tp-remove.html" target="_blank"> zu löschen </a>, verwenden Sie die Funktion unbind(). </p> <p style="text-align: left;"><span style="color: #ff0000"><strong>2. Überwachen Sie das Keyup- oder Keydown-Ereignis von JQuery </strong></span></p> <p style="text-align: left;">Diese Methode kann das Triggerereignis jedes Schlüssels überwachen und die Fuzzy-Abfragemethode an das Targeting binden Beim Antwortereignis löst jeder Klick ein Fuzzy-Abfrageereignis aus. Dies erhöht jedoch den Druck auf die Datenbank erheblich. Wenn viele Personen arbeiten und kein Cache vorhanden ist, explodiert die Datenbank innerhalb von Minuten. </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. Verwenden Sie die Watch-Attribut-Beobachtermethode von Vue.js. </strong></span></p> <p style="text-align: left;">Diese Methode kann die Änderungen der Attribute im Eingabefeld dynamisch beobachten. Solange sich der Wert des Eingabefelds ändert, wird die Antwortmethode dynamisch aufgerufen. </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>Es lohnt sich Am Ende habe ich gesagt, dass es drei Möglichkeiten gibt, den Wert im Eingabetextfeld abzurufen: </strong></span></p> <p style="text-align: left;">1. Mit dieser Methode kann nur die Standardmethode abgerufen werden. Mit anderen Worten: Der ursprünglich in Ihrem CSS-Code definierte Wert ist derselbe Wert, wenn die Seite zum ersten Mal angezeigt wird, und dieser Wert ändert sich nicht. </p> <p style="text-align: left;">2. Erhalten Sie es über prop("value"). Diese Methode kann sowohl den Standardwert als auch den geänderten Wert abrufen. Sie können ihn erhalten, solange Sie ihn ändern. </p> <p style="text-align: left;">3. Erhalten Sie es über val(). Das fühlt sich ähnlich an wie prop("value"). </p> <p style="text-align: left;">4. Es kann auch mit der V-Modell-Bindung von Vue.js abgerufen werden, das zählt also als 4 Methoden. </p> <p style="text-align: left;">Dies sind nur persönliche Schlussfolgerungen aus mehreren Tests. Es gibt keine verbindliche Aussage, ich hoffe, dass jemand sie rechtzeitig korrigieren kann. </p> <p>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! </p> <p>Empfohlene Lektüre: </p> <p><a href="http://www.php.cn/js-tutorial-388709.html" target="_blank">So erhalten Sie den Wert der Transformation mit jquery</a><br></p> <p><a href="http://www.php.cn/js-tutorial-388707.html" target="_blank">Wie Sie mehrere AJAX anfordern und darauf warten Anfragen zusammen</a><br></p> <p><a href="http://www.php.cn/js-tutorial-388704.html" target="_blank">Verbieten, dass die untere Seite unter Pop-ups verschoben wird</a><br></p><p>Das obige ist der detaillierte Inhalt vonDynamische Fuzzy-Abfrage basierend auf der Eingabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="So erhalten Sie den Wert von transform in jquery" href="http://m.php.cn/de/faq/388709.html">So erhalten Sie den Wert von transform in jquery</a></span><span>Nächster Artikel：<a class="dBlack" title="So erhalten Sie den Wert von transform in jquery" href="http://m.php.cn/de/faq/388712.html">So erhalten Sie den Wert von transform in jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</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/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</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/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</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:setlang('ko');" class="language course-right-orders chooselan " 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:;" class="language course-right-orders chooselan chooselanguage" 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>