ブートストラップ plug-in_javascript スキルに基づいてフォームに自動的に入力するオートコンプリートの実装

オートコンプリートは、ブートストラップ プラグインをベースに、スクリプト コード、ユースケース、バックエンド サーバー (php) を提供して自動的にフォームを完成させます。原文では不明な点がいくつかあります。 .

まず、bootstrap&jquery をロードする必要があります。追加の説明が必要なのは、バックエンドによって返される 2 次元配列が formatItem メソッド以下の呼び出しと一致している必要があるということです。
さらに、返されるデータは最初に parseJSON である必要があります。

関連パラメータの説明:

ソース: 関数(クエリ,プロセス){}。 query は現在のテキスト入力ボックス内の文字列を表します。このメソッドでは、Ajax を通じてバックグラウンドからデータ (配列形式の json オブジェクト) をリクエストし、返されたオブジェクトをプロセスのパラメーターとして使用できます。 >
formatItem: 関数(項目){}。返されたデータの特定の json オブジェクトを文字列形式に変換して、プロンプト リストに表示します。 戻り値:
setValue: 関数(項目){}。プロンプトリストの項目を選択したときに、テキスト入力ボックスに表示される値と実際に取得する値を設定します。戻り値の形式: {'data-value':item["入力ボックスに表示されている値の項目属性"],'real-value':item["実際に取得する必要がある値の項目属性" ]}。後でテキスト入力ボックスから使用できます。実数値属性は値を取得します。
項目: オートコンプリート プロンプトの結果セットの最大数、デフォルト:
minLength: 現在のテキスト入力ボックスの文字列がこの属性値に達した場合にのみマッチングが実行されます。 デフォルト: 。
遅延: 入力が速すぎることによるバックグラウンドへの頻繁なリクエストを防ぐために、実際にバックグラウンドからデータをリクエストするまでのミリ秒数を指定します。デフォルト: 500。

ブートストラップ プラグインに基づいてフォームに自動的に入力するオートコンプリートを実装します。コードは次のとおりです

1. コード

<script>
$('#sim_iccid').autocomplete({
 source:function(query,process){
  var matchCount = this.options.items;//允许返回结果集最大数量
  $.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){
   respData = $.parseJSON(respData);//解析返回的数据
   return process(respData);
  });
 },
 formatItem:function(item){
  return item["iccid"]+"("+item["mobile"]+")";
 },
 setValue:function(item){
  return {'data-value':item["iccid"],'real-value':item["mobile"]};
 }
});
</script>

2. $data は 2 次元配列

echo json_encode( $data )

3. 返される必要がある標準の json 形式

[コード][{"iccid":"12345678901234567890","モバイル":"1850000"},{"iccid":"12345785","モバイル":"1850001"}][コード]

ブートストラップ オートコンプリート コントロール Autocomplete

は、ブートストラップ独自のコントロール typeahead に基づいています。これは、typeahead が複雑なオブジェクトをサポートしていないためです。

//示例代码如下：
 
$('#autocompleteInput').autocomplete({
  source:function(query,process){
   var matchCount = this.options.items;//返回结果集最大数量
   $.post("/bootstrap/region",{"matchInfo":query,"matchCount":matchCount},function(respData){
    return process(respData);
   });
  },
  formatItem:function(item){
   return item["regionName"]+"("+item["regionNameEn"]+"，"+item["regionShortnameEn"]+") - "+item["regionCode"];
  },
  setValue:function(item){
   return {'data-value':item["regionName"],'real-value':item["regionCode"]};
  }
 });
 
$("#goBtn").click(function(){ //获取文本框的实际值
  var regionCode = $("#autocompleteInput").attr("real-value") || "";
  alert(regionCode);
 });

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。