基於input的動態模糊查詢

這次帶給大家基於input的動態模糊查詢，基於input動態模糊查詢的注意事項有哪些，以下就是實戰案例，一起來看一下。

最近在用jQuery實作動態模糊查詢的時候，找了挺久都沒有找到像Vue.js的watch屬性這麼好用的動態模糊查詢方法。就分享目前遇到的坑洞和可以實現動態查詢的幾種方式。

1.jQuery的change()方法。

這個方法要失去所在的input框的焦點時，事件才會被觸發，感覺有點雞肋，也有可能是我沒有完全會熟用這個方法，希望懂的大神可以分享一下使用秘籍。

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

change()函數用於為每個符合元素的change事件綁定處理函數。此函數也可用於觸發change事件。另外，你還可以額外傳遞給事件處理函數一些資料。 change事件會在文字內容或選項被變更時觸發。此事件僅適用於和以及<select>。對於text和textarea元素，該事件會在元素失去焦點時發生(文字內容也發生了變更)。此外，你可以為相同元素多次呼叫該函數，從而綁定多個事件處理函數。觸發change事件時，jQuery會依照綁定的先後順序依序執行綁定的事件處理函數。若要<a href="http://www.php.cn/php/php-tp-remove.html" target="_blank">刪除</a>透過change()綁定的事件，請使用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;">這個方法可以動態觀察input框裡面的屬性變化狀況，只要input框的value值發生變化，就會動態呼叫回應的方法。 </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>#最後值得一說的是，取得input的text框裡面的value值有三種方法.</strong></span></p> <p style="text-align: left;">#1.透過attr("value")取得。這種方法取得只能取得預設的。也就是說，你css程式碼裡面原來定義的value值是多少，頁面第一次展現的也是多少，而且這個值不會變。 </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怎麼取得transform的值</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>以上是基於input的動態模糊查詢的詳細內容。更多資訊請關注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怎麼取得transform的值" href="https://m.php.cn/zh-tw/faq/388709.html">jquery怎麼取得transform的值</a></span><span>下一篇：<a class="dBlack" title="jquery怎麼取得transform的值" href="https://m.php.cn/zh-tw/faq/388712.html">jquery怎麼取得transform的值</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="https://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/zh-tw/faq/1609.html" title="深入淺析Bootstrap列表組元件" class="aBlack">深入淺析Bootstrap列表組元件</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/1640.html" title="JavaScript函數柯里化詳解" class="aBlack">JavaScript函數柯里化詳解</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/1949.html" title="JS密碼產生與強度偵測完整實例(附demo源碼下載)" class="aBlack">JS密碼產生與強度偵測完整實例(附demo源碼下載)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/2248.html" title="Angularjs整合微信UI（weui）" class="aBlack">Angularjs整合微信UI（weui）</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/2351.html" title="JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧" class="aBlack">JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益線上PHP培訓，幫助PHP學習者快速成長！</p></div><div class="footermid"><a href="https://m.php.cn/zh-tw/about/us.html">關於我們</a><a href="https://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="https://m.php.cn/zh-tw/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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>