AutoComplete Eingabedaten php/jquery/mysqli

Ich habe diese Anwendung gemacht, in der Suche nach einem Ergebnis und mit jquery mich automatisch vervollständigen. Was möchte ich wissen ist, dass bei der automatischen Vervollständigung das erste "cari_keyword_id" -Feld und klicken Sie mich automatisch die andere Eingabe, die die Benutzer-ID ist. Wie ist es möglich?? Ich brauche den zweiten Schritt, indem ich das erste Feld mit Autovervollständigung gefüllt habe.AutoComplete Eingabedaten php/jquery/mysqli

Ich hoffe, Sie können mir helfen oder mir Informationen geben!

grußS !!!

CODE

index.php

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Autocomplete Search dengan PHP, MySQLi, Ajax and jQuery </title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Le styles --> 
     <link href="assets/css/bootstrap.css" rel="stylesheet" media="screen"> 
     <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> 

    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="../assets/js/html5shiv.js"></script> 
    <![endif]--> 

    <!-- Fav and touch icons --> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png"> 
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png"> 
            <link rel="shortcut icon" href="assets/ico/favicon.png"> 
    </head> 

    <body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="http://andeznet.com">AndezNet</a> 
      <div class="nav-collapse collapse"> 
      <ul class="nav"> 
       <li><a href="active">Home</a></li> 

      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 


    <div class="container"> 
    <div class='web'> 
     <input type="text" class="cari_keyword form-control" id="cari_keyword_id" placeholder="Cari Nama Siswa..." /> 
      <input type="text" class="cari_keyword form-control" id="cari_jrsn_pil1_id" placeholder="ID..." /> 
     <div id="result"></div> 
    </div> 

    <div class="row-fluid"> 
      <div class="span12"> 
       <div class="row-fluid"> 
       <div class="alert alert-info"> 
        <a name="contact"></a> 
        <h2>www.andeznet.com</h2> 
        <p class="text-info">Gudang Teknologi & Informasi</p> 
        <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p> 
       </div><!--/span--> 
       </div><!--/row--> 
      </div><!--/span--> 
    </div><!--/row--> 

    </div> 
    <script src="assets/js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript"> 
$(function(){ 
$(".cari_keyword").keyup(function() 
{ 
    var cari_keyword_value = $(this).val(); 
    var dataString = 'cari_keyword='+ cari_keyword_value; 
    if(cari_keyword_value!='') 
    { 
     $.ajax({ 
      type: "POST", 
      url: "cari.php", 
      data: dataString, 
      cache: false, 
      success: function(html) 
       { 
        $("#result").html(html).show(); 
       } 
     }).done(function(respuesta){ 
         $("#nombre").val(respuesta.nombre); 
        }); 
    } 
    return false;  
}); 

$("#result").live("click",function(e){ 
    var $clicked = $(e.target); 
    var $name = $clicked.find('.nama_siswa').html(); 
    var decoded = $("<div/>").html($name).text(); 
    $('#cari_keyword_id').val(decoded); 
}); 

$(document).live("click", function(e) { 
    var $clicked = $(e.target); 
    if (! $clicked.hasClass("cari_keyword")){ 
     $("#result").fadeOut(); 
    } 
}); 

$('#cari_keyword_id').click(function(){ 
    $("#result").fadeIn(); 
}); 
}); 
</script> 


    <script src="assets/js/bootstrap.min.js"></script> 

    </body> 
</html>

cari.php

<?php 
    include('koneksi.php'); 
    if(isset($_POST['cari_keyword'])) 
    { 
     $cari_keyword = $dbConnection->real_escape_string($_POST['cari_keyword']); 
     $sqlSiswa="SELECT id_daftar,s_nama FROM master WHERE s_nama LIKE '%$cari_keyword%'"; 
     $resSiswa=$dbConnection->query($sqlSiswa); 

     if($resSiswa === false) { 
      trigger_error('Error: ' . $dbConnection->error, E_USER_ERROR); 
     }else{ 
      $rows_returned = $resSiswa->num_rows; 
     } 

$bold_cari_keyword = '<strong>'.$cari_keyword.'</strong>'; 
if($rows_returned > 0){ 
      while($rowSiswa = $resSiswa->fetch_assoc()) 
      { 
       echo '<div class="show" align="left"><span class="nama_siswa">'.str_ireplace($cari_keyword,$bold_cari_keyword,$rowSiswa['s_nama']).'</span></div>'; 
      } 
     }else{ 
      echo '<div class="show" align="left">No matching records.</div>'; 
     } 
    } 
?>

table.sql

CREATE TABLE IF NOT EXISTS `master` (
`id_daftar` int(5) NOT NULL, 
    `s_nama` varchar(150) NOT NULL, 
    `s_jk` int(1) NOT NULL, 
    `s_agama` int(1) NOT NULL, 
    `s_tmp_lahir` varchar(100) NOT NULL, 
    `s_tgl_lahir` date NOT NULL, 
    `jrsn_pil1` int(4) NOT NULL, 
    `jrsn_pil2` int(4) NOT NULL, 
    `tgl_daftar` date NOT NULL, 
    `nisn` varchar(15) NOT NULL, 
    `noreg` varchar(10) NOT NULL, 
    `Alamat` text NOT NULL 
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=172 ; 

INSERT INTO `master` (`id_daftar`, `s_nama`, `s_jk`, `s_agama`, `s_tmp_lahir`, `s_tgl_lahir`, `jrsn_pil1`, `jrsn_pil2`, `tgl_daftar`, `nisn`, `noreg`, `Alamat`) VALUES 
(30, 'GUSTI SUMAINDRA', 1, 1, 'sadadad', '2009-03-01', 1103, 1254, '2015-04-08', '0001', '0001', ''), 
(31, 'AFIF PRASETYA', 1, 0, '', '0000-00-00', 0, 0, '2015-04-08', '0002', '0002', '');

koneksi.php

<?php 
    define('_HOST_NAME', 'localhost'); 
    define('_DATABASE_USER_NAME', 'root'); 
    define('_DATABASE_PASSWORD', ''); 
    define('_DATABASE_NAME', 'prueba'); 

    $dbConnection = new mysqli(_HOST_NAME, _DATABASE_USER_NAME, _DATABASE_PASSWORD, _DATABASE_NAME); 
    if ($dbConnection->connect_error) { 
     trigger_error('Connection Failed: ' . $dbConnection->connect_error, E_USER_ERROR); 
    } 
?>

Quelle

2016-04-26 JMF

Sie können ein Datenattribut für weitere Informationen wie diese verwenden:

echo '<div class="show" align="left"><span class="nama_siswa" data-id="'.$rowSiswa['id_daftar'].'">'.str_ireplace($cari_keyword,$bold_cari_keyword,$rowSiswa['s_nama']).'</span></div>';

Jetzt haben Sie sowohl den Namen und die ID mit dem Ergebnis, klickt der Benutzer zugeordnet ist. Sie können dies verwenden, um die andere Eingabe zu ändern.

$("#result").live("click",function(e){ 
    var $clicked = $(e.target); 
    var $clickedKeyword = $clicked.find('.nama_siswa'); 
    var $name = $clickedKeyword.html(); 
    var id = $clickedKeyword.data('id'); 
    var decoded = $("<div/>").html($name).text(); 
    $('#cari_keyword_id').val(decoded); 
    $('#cari_jrsn_pil1_id').val(id); 
});

Hoffe, das hilft.

Quelle

2016-04-26 20:55:28 colburton

Vielen Dank wirklich !! es war was ich wollte! :) Jetzt werde ich versuchen, dass diese beiden Daten in Autocomplete gezeigt mir eine BD einfügen, um eine Schaltfläche zum Senden zu geben !! Ich muss die jquery fangen oder kann ich von der Eingabe einfügen? @ collburton – JMF

Ich bin mir nicht sicher, was Sie mit "BD" meinen, aber eine Submit-Taste könnte wie folgt eingefügt werden: $ ('. web'). append ('') – colburton

AutoComplete Eingabedaten php/jquery/mysqli

Antwort

Verwandte Themen