AutoComplete input data php/jquery/mysqli

Question

I have made this application in which to look for a result and with jquery autocomplete me. What do I want to know is that when autocomplete the first "cari_keyword_id" field and click me automatically fill the other input, which is the user ID. How is possible?? I need the second step, taking the first field autocomplete filled.

I hope you can help me or give me information!

greetingS!!!

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);
    }
?>

colburton · Accepted Answer · 2016-04-26 20:55:28Z

1

You can use a data attribute for more information like this:

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>';

Now you have both the name and the id associated with the result the user clicks. You can use this to change the other input.

$("#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);
});

Hope this helps.

answered Apr 26, 2016 at 20:55

colburton

4,7252 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JMF Over a year ago

Thank you very much really!! it was what I wanted! :) Now I will try that these two data shown in autocomplete me insert a BD to give a button to send !! I have to catch the jquery or I can insert from the input? @colburton

colburton Over a year ago

I'm not sure what you mean with "BD", but a submit button could be inserted like that: $('.web').append('<button type="submit">send</button>')

Collectives™ on Stack Overflow

AutoComplete input data php/jquery/mysqli

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related