以下のエディターは、入力に基づいた動的ファジークエリの実装方法を共有します。これは良い参考値であり、皆さんの役に立つことを願っています。エディターをフォローして見てみましょう
最近、動的ファジークエリを実装するために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() 関数は、一致する各要素の変更イベントにハンドラー関数をバインドするために使用されます。この関数は、変更イベントをトリガーするために使用することもできます。さらに、追加のデータをイベント ハンドラーに渡すことができます。変更イベントは、テキストの内容またはオプションが変更されるとトリガーされます。このイベントは、 および
2. JQuery の keyup または keydown イベントをリッスンします
このメソッドは、各キーのトリガー イベントを監視でき、キーが押されるたびにファジー クエリ メソッドを応答イベントにバインドできます。イベントがトリガーされますが、これを実行すると、データベースを操作する人が多く、キャッシュがない場合、データベースは数分で爆発してしまいます。
<input type="text" id="#n3"/> var $n3=$("#n3");//定位到input框 $n3.keyup(function(){ this.query_search($n3.prop("value"));//query_search为模糊查询的方法 })
3. Vue.jsのwatch属性オブザーバーメソッドを使用します。
このメソッドは、入力ボックスの属性の変化を動的に観察でき、入力ボックスの値が変化する限り、応答メソッドが動的に呼び出されます。
最後に言及する価値があるのは、入力テキストボックスの値を取得する方法が 3 つあるということです。
1. attr("value ") 。このメソッドはデフォルトのものしか取得できません。つまり、CSS コードで最初に定義された値は、ページが初めて表示されるときと同じ値になり、この値は変更されません。
2. prop("value") を通じて取得します。このメソッドはデフォルト値だけでなく、変更された値も取得できます。
3. val() を通じて取得します。これは prop("value") に似た感じです。
4. Vue.js の v-model バインディングを使用して取得することもできるため、4 つのメソッドとしてカウントされます。
上記は私があなたのためにまとめたものです。
関連記事:
WeChatミニプログラムでページジャンプと値転送を実装する方法
WeChat ミニ プログラムでテンプレートにデータを渡す方法
以上が入力に動的ファジークエリを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。