Bootstrapプラグインに基づいて、AutoCompleteはフォームを自動的に完成させ、スクリプトコード、ユースケース、およびバックグラウンドサーバー(PHP)を提供します。元のテキストでははっきりと説明されていないものがいくつかあります。私はそれがすべての人を助けることができることを願っています。
まず第一に、私はブートストラップとjQueryをロードしなければなりません。バックエンドによって返される2次元配列は、FormatiTemメソッド以下の呼び出しと一致することに注意する必要があります。
さらに、返されたデータは最初にパーセイソンでなければなりません!覚えて。
関連パラメーター説明:
ソース: function(query、process){}。クエリは、現在のテキスト入力ボックスの文字列を表します。この方法では、Ajaxを介して背景(配列の形のJSONオブジェクト)からデータを要求でき、その後、返されたオブジェクトはプロセスのパラメーターとして使用されます。
FormatiTem: function(item){}。データを返す特定のJSONオブジェクトは、プロンプトリストに表示されるために使用される文字列形式に変換され、戻り値は次のとおりです。
setValue: function(item){}。プロンプトリストのアイテムが選択されている場合、テキスト入力ボックスに表示される値と、実際に取得する必要がある値を設定します。 return値形式:{'data-value':item ["入力ボックスに表示される値の項目プロパティ"]、 'real-value':item [""項目[取得する必要がある実際の値のアイテムプロパティ "]}、後で、この値はテキスト入力ボックスの実際の値プロパティを介して取得できます。
項目:自動完了プロンプトの結果セットの最大数、デフォルト:8;
minlength:一致するプロセスは、現在のテキスト入力ボックスの文字列がプロパティ値に達した場合にのみ実行されます。デフォルト:1;
遅延:遅延ミリ秒の数を指定した後、バックグラウンドから頻繁にリクエストが頻繁に発生するのを防ぐために、バックグラウンドからデータが要求されます。デフォルト:500
Bootstrapプラグインに基づいて、AutoCompleteは自動的に完成したフォームで、コードは次のとおりです。
1。コード
<script> $( '#sim_iccid')。autocomplete({source:function(query、process){var matchcount = this.options.items; //許可される結果セットの最大数はisです$ .get( "http://www.soyiyuan.com/update/"、{"iccid"、 "matchcount":matchcount}、function(respdata){respdata = $ .parsejson(respdata); item [iccid "]+"( "+item [" mobile "]+");2。$データは2次元配列です
echo json_encode($ data)
3。返す必要がある標準のJSON形式
[code] [{"iccid": "12345678901234567890"、 "モバイル": "1850000"}、{"iccid": "12345785"、 "モバイル": "1850001"}] [コード] [コード]
Typeaheadは複雑なオブジェクトをサポートしていないため、 Bootstrap Autocomplete Control Autocompleteは、Bootstrap独自のコントロールTypeaheadに基づいて変換されます。
//サンプルコードは次のとおりです。$( '#autocompleteinput')。autocomplete({source:function(query、process){var matchcount = this.options.item; //結果セット$ .post( "/boottrap/region」、{" matchinfo ":quyount":matchount ":quyount" Process(respdata); {'data-value':item ["regionname"]、 'real-value':item ["regioncode"]}}; $( "#gobtn")。クリック(function(){//テキストボックスの実際の値を取得var regioncode = $( "#autocompleteinput")。それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。