helixxchi

テクノロジープログラミング一般的なカテゴリ

Jqueryは、単一の自動選択リクエストで複数のフィールドをオートコンプリートします。ベスト2の例

23 9月 2021

jqueryは、単一の自動選択リクエストで複数のフィールドをオートコンプリートします：ソースコードを使用したデモの例。

今日、私たちはあなたと共有したいと思います ajaxを使用して、1回の選択で複数のフィールドをオートコンプリートしますこの投稿では、あなたに見せます jQueryとAJAXを使用して複数のフィールドのデータをオートコンプリートする方法は？、聞いて jQuery、Ajax、PHP、MySQLを使用したjQueryオートコンプリート複数フィールド 実装のデモと例を示します。この投稿では、 jQueryPHPとMySQLを使用した複数の値を持つオートコンプリートテキストボックス 例を挙げて。

jqueryは、単一の自動選択リクエストで複数のフィールドをオートコンプリートします

ステップ1.データベーステーブルの構造

「単一の自動選択リクエストで複数のフィールドをオートコンプリートするjquery」の例では、productsテーブルを使用しています。

CREATE TABLE `products` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `productname` varchar(80) NOT NULL,
  `pname` varchar(60) NOT NULL,
  `lname` varchar(60) NOT NULL,
  `pcode` varchar(80) NOT NULL,
  `sku` int(2) NOT NULL,
  `price` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `products` (

`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,

`productname` varchar(80) NOT NULL,

`pname` varchar(60) NOT NULL,

`lname` varchar(60) NOT NULL,

`pcode` varchar(80) NOT NULL,

`sku` int(2) NOT NULL,

`price` varchar(10) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ステップ2.Dataabseの構成

次のような新しいファイル名を作成します config.php データベース接続を定義します。

<?php
$host = "localhost";
$product = "root";
$password = "";
$dbname = "pakainfo_v1";

$con = mysqli_connect($host, $product, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

<?php

$host = "localhost";

$product = "root";

$password = "";

$dbname = "pakainfo_v1";

$con = mysqli_connect($host, $product, $password,$dbname);

// Check connection

if (!$con) {

die("Connection failed: " . mysqli_connect_error());

}

ステップ1.HTML

入力要素を使用してHTMLテーブルレイアウトを作成します。ここには、jQueryを使用したすべてのhtmlテキストボックスの最初にjQueryUIオートコンプリートも含まれています。次に、[追加]ボタンを作成して、クリックされたときに新しいhtmlテーブル行を追加します。

<h4>jquery autocomplete multiple fields with single auto-select request</h4>
<div class="container">
 
 <table border='1' style='border-collapse: collapse;'>
  <thead>
   <tr>
    <th>Productname</th>
    <th>Name</th>
    <th>Age</th>
    <th>Email</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr class='tr_input'>
    <td><input type='text' class='productname' id='productname_1' placeholder='Enter productname'></td>
    <td><input type='text' class='name' id='name_1' ></td>
    <td><input type='text' class='sku' id='sku_1' ></td>
    <td><input type='text' class='pcode' id='pcode_1' ></td>
    <td><input type='text' class='price' id='price_1' ></td>
   </tr>
  </tbody>
 </table>
 <br>
 <input type='button' value='Add more' id='addmore'>
</div>

<h4>jquery autocomplete multiple fields with single auto-select request</h4>

<thead>

<tr>

<th>Productname</th>

<th>Email</th>

<th>Salary</th>

</tr>

</thead>

<tbody>

</tr>

</tbody>

</table>

<br>

</div>

ステップ4.PHPコード（jqueryは単一の自動選択リクエストで複数のフィールドをオートコンプリートします）

<?php
include "config.php";

$request = $_POST['request']; // request

// Get productname list
if($request == 1){
 $search = $_POST['search'];

 $query = "SELECT * FROM products WHERE productname like'%".$search."%'";
 $result = mysqli_query($con,$query);
 
 while($row = mysqli_fetch_array($result) ){
  $productData[] = array("value"=>$row['id'],"label"=>$row['productname']);
 }

 // encoding array to json format
 echo json_encode($productData);
 exit;
}

// Get details
if($request == 2){
 $productid = $_POST['productid'];
 $sql = "SELECT * FROM products WHERE id=".$productid;

 $result = mysqli_query($con,$sql); 

 $products_arr = array();

 while( $row = mysqli_fetch_array($result) ){
  $productid = $row['id'];
  $description = $row['pname']." ".$row['lname'];
  $pcode = $row['pcode'];
  $sku = $row['sku'];
  $price = $row['price'];

  $products_arr[] = array("id" => $productid, "name" => $description,"pcode" => $pcode, "sku" =>$sku, "price" =>$price);
 }

 // encoding array to json format
 echo json_encode($products_arr);
 exit;
}

<?php

include "config.php";

$request = $_POST['request']; // request

// Get productname list

if($request == 1){

$search = $_POST['search'];

$query = "SELECT * FROM products WHERE productname like'%".$search."%'";

$result = mysqli_query($con,$query);

while($row = mysqli_fetch_array($result) ){

$productData[] = array("value"=>$row['id'],"label"=>$row['productname']);

}

// encoding array to json format

echo json_encode($productData);

exit;

}

// Get details

if($request == 2){

$productid = $_POST['productid'];

$sql = "SELECT * FROM products WHERE id=".$productid;

$result = mysqli_query($con,$sql);

$products_arr = array();

while( $row = mysqli_fetch_array($result) ){

$productid = $row['id'];

$description = $row['pname']." ".$row['lname'];

$pcode = $row['pcode'];

$sku = $row['sku'];

$price = $row['price'];

$products_arr[] = array("id" => $productid, "name" => $description,"pcode" => $pcode, "sku" =>$sku, "price" =>$price);

}

// encoding array to json format

echo json_encode($products_arr);

exit;

}

ステップ5.jQueryスクリプト

jqueryの単純なjqueryスクリプトは、単一の自動選択要求で複数のフィールドをオートコンプリートします。

$(document).ready(function(){

 $(document).on('keydown', '.productname', function() {
 
  var id = this.id;
  var splitid = id.split('_');
  var index = splitid[1];

  // Initialize jQuery UI autocomplete
  $( '#'+id ).autocomplete({
   source: function( request, productData ) {
    $.ajax({
     url: "getDetails.php",
     type: 'post',
     dataType: "json",
     data: {
      search: request.term,request:1
     },
     success: function( data ) {
      productData( data );
     }
    });
   },
   select: function (event, ui) {
    $(this).val(ui.item.label); // display the selected text
    var productid = ui.item.value; // selected value

    // AJAX
    $.ajax({
     url: 'getDetails.php',
     type: 'post',
     data: {productid:productid,request:2},
     dataType: 'json',
     success:function(productData){
 
      var len = productData.length;

      if(len > 0){
       var id = productData[0]['id'];
       var name = productData[0]['name'];
       var pcode = productData[0]['pcode'];
       var sku = productData[0]['sku'];
       var price = productData[0]['price'];

       // Set value to textboxes
       document.getElementById('name_'+index).value = name;
       document.getElementById('sku_'+index).value = sku1;
       document.getElementById('pcode_'+index).value = pcode;
       document.getElementById('price_'+index).value = price;
 
      }
 
     }
    });

    return false;
   }
  });
 });
 
 // Add more
 $('#addmore').click(function(){

  // Get last id 
  var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
  var split_id = lastname_id.split('_');

  // New index
  var index = Number(split_id[1]) + 1;

  // Make row with HTML input elements
  var html = "<tr class='tr_input'><td><input type='text' class='productname' id='productname_"+index+"' placeholder='Enter productname'></td><td><input type='text' class='name' id='name_"+index+"' ></td><td><input type='text' class='sku' id='sku_"+index+"' ></td><td><input type='text' class='pcode' id='pcode_"+index+"' ></td><td><input type='text' class='price' id='price_"+index+"' ></td></tr>";

  // Append data
  $('tbody').append(html);
 
 });
});

$(document).ready(function(){

$(document).on('keydown', '.productname', function() {

var id = this.id;

var splitid = id.split('_');

var index = splitid[1];

// Initialize jQuery UI autocomplete

$( '#'+id ).autocomplete({

source: function( request, productData ) {

$.ajax({

url: "getDetails.php",

type: 'post',

dataType: "json",

data: {

search: request.term,request:1

success: function( data ) {

productData( data );

}

});

select: function (event, ui) {

$(this).val(ui.item.label); // display the selected text

var productid = ui.item.value; // selected value

// AJAX

$.ajax({

url: 'getDetails.php',

type: 'post',

data: {productid:productid,request:2},

dataType: 'json',

success:function(productData){

var len = productData.length;

if(len > 0){

var id = productData[0]['id'];

var name = productData[0]['name'];

var pcode = productData[0]['pcode'];

var sku = productData[0]['sku'];

var price = productData[0]['price'];

// Set value to textboxes

document.getElementById('name_'+index).value = name;

document.getElementById('sku_'+index).value = sku1;

document.getElementById('pcode_'+index).value = pcode;

document.getElementById('price_'+index).value = price;

}

});

return false;

}

});

// Add more

$('#addmore').click(function(){

// Get last id

var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');

var split_id = lastname_id.split('_');

// New index

var index = Number(split_id[1]) + 1;

// Make row with HTML input elements

var html = "<tr class='tr_input'><td><input type='text' class='productname' id='productname_"+index+"' placeholder='Enter productname'></td><td><input type='text' class='name' id='name_"+index+"' ></td><td><input type='text' class='sku' id='sku_"+index+"' ></td><td><input type='text' class='pcode' id='pcode_"+index+"' ></td><td><input type='text' class='price' id='price_"+index+"' ></td></tr>";

// Append data

$('tbody').append(html);

});

jQuery-Autocomplete-Mutiple-Fields-Using-jQuery-Ajax-PHP-and-MySQL

私はあなたがについてのアイデアを得ることを願っています jqueryは、単一の自動選択リクエストで複数のフィールドをオートコンプリートします。
フィードバックをお願いします infinityknow.comブログ。
この記事に関する貴重なフィードバック、質問、コメントはいつでも歓迎します。
この投稿を楽しんで気に入った場合は、共有することを忘れないでください。

参考資料 : www.pakainfo.com