Arama tamamlama mysql veri yazdırmak

19-02-2016, 20:53:54

Arkadaşlar elimde arama tamamlama ile ilgili kodlar var fakat sadece arama yaptığım textbox içerisine etki ediyor. Yapmak istediğim şey şu;
Arama yaptığımda iki textbox'ım olacak ve arama yaptığımda örnek; Ahmeti aradığımda ahmeti 1.textbox'a telefonunu 2.textbox'a. Bunu nasıl yaparım?

Kodlar;
jquery

 <script>
        $(function(){

            var $search = $('#search');

            $search.autocomplete({
                source: 'kapi.php',
                focus: function(event, ui){
                    $search.val(ui.item.mus_telefon);
                },
                select: function(event, ui){
//                    window.location.href = 'https://www.google.com/#q=' + ui.item.mus_adi;
		        $search.val(ui.item.mus_telefon);
                }
            });

            $search.data('.ui-autocomplete-loading')._renderItem = function( ul, item ){

              

                return $li.appendTo(ul);

            };

        });
    </script>

Veriyi çekme;

<?php

try {
    $db = new PDO('mysql:host=localhost; db bilgileri);
} catch (PDOException $e ){
    die($e->getMessage());
}

$term = $_GET['term'];

$query = $db->query('SELECT * FROM musteriler WHERE mus_adi LIKE "%' . $term . '%"', PDO::FETCH_ASSOC);

if ( $query->rowCount() ){

    $data = array();

    foreach ( $query as $row ){
        $data[] = array(
           	'value' => $row['mus_adi'],
            	'mus_id' => $row['mus_id'],
            	'mus_adi' => $row['mus_adi'],
	    	'mus_telefon' => $row['mus_telefon'],
			 
          
        );
    }

    echo json_encode($data);

}

?>

20-02-2016, 13:46:11

#2

astald

Aramanın yapıldığı formuda yazsanız daha iyi yardım edilebilir enazından.

20-02-2016, 18:29:03

#3

siyahincim

Form kısmı burada

 
<html>
<head>
<style>

	//* search *//

  #search {
            width: 300px;
        }
        .ui-autocomplete li a {
            overflow: hidden;
            display: block;
        }
        .ui-autocomplete li a img {
            float: left;
            margin-right: 10px;
            height: 40px;
        }
        .ui-autocomplete li a .username {
            display: block;
            font-size: 12px;
            line-height: 17px;
			background-color:#000;
        }
        .ui-autocomplete li a .email {
            display: block;
            font-size: 12px;
            color: #999;
        }
		.ui-autocomplete-loading {
   background: #fff url(ajax-loader.gif) no-repeat 97%;

}	

	//* search *//
	
	
</style>
</head>
<body>
<form style="border:6px solid #00E7FF;" id="form" name="form" method="post" action="gonder.php">
   <tr>
      <td><strong>Adı Soyadı</strong></td>
      <td><strong>:</strong></td>
      <td><label for="mus_adi"></label>
     <input name="mus_adi" id="search"  value="" type="text" size="25" title="Lütfen Müşteri Adı Yazınız!" required style="border:2px inset #00E7FF; padding:5px; "/>
</td>
    </tr>
    <tr>
      <td><strong>Telefon</strong></td>
      <td><strong>:</strong></td>
      <td><label for="mus_telefon"></label>
      <input name="mus_telefon" maxlength="11" title="Lütfen Telefon Numarası Yazınız!" type="text" id="telefon" size="25" value=""  required style="border:2px inset #00E7FF; padding:5px; "/></td> </tr>
          <td width="98"><input type="submit" name="submit" id="submit" value="Formu Gönder" /></td>
</form>
   
</body>
</html>

21-02-2016, 15:47:04

#4

Webdu

Kimlik doğrulama veya yönetimden onay bekliyor.

siyahincim adlı üyeden alıntı: mesajı görüntüle

Arkadaşlar elimde arama tamamlama ile ilgili kodlar var fakat sadece arama yaptığım textbox içerisine etki ediyor. Yapmak istediğim şey şu;
Arama yaptığımda iki textbox'ım olacak ve arama yaptığımda örnek; Ahmeti aradığımda ahmeti 1.textbox'a telefonunu 2.textbox'a. Bunu nasıl yaparım?

Kodlar;
jquery

 <script>
        $(function(){

            var $search = $('#search');

            $search.autocomplete({
                source: 'kapi.php',
                focus: function(event, ui){
                    $search.val(ui.item.mus_telefon);
                },
                select: function(event, ui){
//                    window.location.href = 'https://www.google.com/#q=' + ui.item.mus_adi;
		        $search.val(ui.item.mus_telefon);
                }
            });

            $search.data('.ui-autocomplete-loading')._renderItem = function( ul, item ){

              

                return $li.appendTo(ul);

            };

        });
    </script>

Veriyi çekme;

<?php

try {
    $db = new PDO('mysql:host=localhost; db bilgileri);
} catch (PDOException $e ){
    die($e->getMessage());
}

$term = $_GET['term'];

$query = $db->query('SELECT * FROM musteriler WHERE mus_adi LIKE "%' . $term . '%"', PDO::FETCH_ASSOC);

if ( $query->rowCount() ){

    $data = array();

    foreach ( $query as $row ){
        $data[] = array(
           	'value' => $row['mus_adi'],
            	'mus_id' => $row['mus_id'],
            	'mus_adi' => $row['mus_adi'],
	    	'mus_telefon' => $row['mus_telefon'],
			 
          
        );
    }

    echo json_encode($data);

}

?>

Sadece kafanıza oturması için örnek vereceğim.
Burası index.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('form').submit(function(){
				var veriler = $('form').serialize();
			$.ajax({ 
               type: "POST", 
               url: "test.php", 
               data: veriler,
               dataType: "json",
               success:function(cevap){ 
            	if(cevap.hata){
            		$('.sonuc').val(cevap.hata);
            	}else{
            		$('.sonuc').val(cevap.telephone);
            	}
               }
            })
            
			})
		})
	</script>
</head>
<body>
	<form action="javascript:void(0)" method="post">
		<input type="text" name="data" />
	</form>
	<input type="text" name="telephone" class="sonuc"/>
</body>
</html>

Burası da ajax.php kısmı

<?php
	try {
		$hostname = "localhost";
		$dbname = "test";
		$dbuser = "root";
		$dbpass = "";
		$vt = new PDO("mysql:host=".$hostname.";dbname=".$dbname.";charset=utf8;","$dbuser","$dbpass");
	}catch(PDOException $e){
		echo $e->getMessage();
	}
	$data = $_POST['data'];
	$query = $vt->query("SELECT * FROM test_table WHERE data = '{$data}'");
	$islem = $query->fetch(PDO::FETCH_ASSOC);
	if(!$islem){
		$islem['hata'] = 'Eşleşme Yok';
	}
	echo json_encode($islem);
?>

Yukarıdaki yapıda ilk input olan 'data' inputuna veri girildiğinde eğer veri varsa ona ait olan telefon numarasını .sonuc classına ait inputa değer olarak ekler. Eğer eşleşen sonuç yoksa 'eşleşme yok' uyarısı çıkaracaktır .sonuc classına ait inputta.

23-02-2016, 22:13:21

#5

siyahincim

Mavicap adlı üyeden alıntı: mesajı görüntüle

Sadece kafanıza oturması için örnek vereceğim.
Burası index.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('form').submit(function(){
				var veriler = $('form').serialize();
			$.ajax({ 
               type: "POST", 
               url: "test.php", 
               data: veriler,
               dataType: "json",
               success:function(cevap){ 
            	if(cevap.hata){
            		$('.sonuc').val(cevap.hata);
            	}else{
            		$('.sonuc').val(cevap.telephone);
            	}
               }
            })
            
			})
		})
	</script>
</head>
<body>
	<form action="javascript:void(0)" method="post">
		<input type="text" name="data" />
	</form>
	<input type="text" name="telephone" class="sonuc"/>
</body>
</html>

Burası da ajax.php kısmı

<?php
	try {
		$hostname = "localhost";
		$dbname = "test";
		$dbuser = "root";
		$dbpass = "";
		$vt = new PDO("mysql:host=".$hostname.";dbname=".$dbname.";charset=utf8;","$dbuser","$dbpass");
	}catch(PDOException $e){
		echo $e->getMessage();
	}
	$data = $_POST['data'];
	$query = $vt->query("SELECT * FROM test_table WHERE data = '{$data}'");
	$islem = $query->fetch(PDO::FETCH_ASSOC);
	if(!$islem){
		$islem['hata'] = 'Eşleşme Yok';
	}
	echo json_encode($islem);
?>

Yukarıdaki yapıda ilk input olan 'data' inputuna veri girildiğinde eğer veri varsa ona ait olan telefon numarasını .sonuc classına ait inputa değer olarak ekler. Eğer eşleşen sonuç yoksa 'eşleşme yok' uyarısı çıkaracaktır .sonuc classına ait inputta.

Verdiğiniz bilgiler için teşekkür ederim.
$query = $vt->query("SELECT * FROM test_table WHERE data = '{$data}'");
test_table yerine kendi tablomu yazdım. fakat çalıştıramadım. WHERE mus_adi(musteriler tablomun içindeki sutunlardan biri) = diye devam ettiğimde ismi buluyor eşleşme yok diyor? Takılıp kaldım atladığımız bir yer mi var diye defalarca inceledim ama sonuca gidemedim.

23-02-2016, 22:49:35

#6

Webdu

siyahincim adlı üyeden alıntı: mesajı görüntüle

Verdiğiniz bilgiler için teşekkür ederim.
$query = $vt->query("SELECT * FROM test_table WHERE data = '{$data}'");
test_table yerine kendi tablomu yazdım. fakat çalıştıramadım. WHERE mus_adi(musteriler tablomun içindeki sutunlardan biri) = diye devam ettiğimde ismi buluyor eşleşme yok diyor? Takılıp kaldım atladığımız bir yer mi var diye defalarca inceledim ama sonuca gidemedim.

Hocam şimdi vereceğim kodu deneyiniz muhtemelen probleminiz çözülecektir.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>Auto</title>
   <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<style>
 
   //* search *//
 
  #search {
            width: 300px;
        }
        .ui-autocomplete li a {
            overflow: hidden;
            display: block;
        }
        .ui-autocomplete li a img {
            float: left;
            margin-right: 10px;
            height: 40px;
        }
        .ui-autocomplete li a .username {
            display: block;
            font-size: 12px;
            line-height: 17px;
         background-color:#000;
        }
        .ui-autocomplete li a .email {
            display: block;
            font-size: 12px;
            color: #999;
        }
      .ui-autocomplete-loading {
   background: #fff url(ajax-loader.gif) no-repeat 97%;
 
}  
 
   //* search *//
    
    
</style>
<script>
        $(function(){
 
            var $search = $('#search');
 
            $search.autocomplete({
                source: 'kapi.php',
                focus: function(event, ui){
                    $search.val(ui.item.mus_telefon);
                },
                select: function(event, ui){
//                    window.location.href = 'https://www.google.com/#q=' + ui.item.mus_adi;
              $('#telefon').val(ui.item.mus_telefon);
                }
            });
 
            $search.data('.ui-autocomplete-loading')._renderItem = function( ul, item ){
 
               
 
                return $li.appendTo(ul);
 
            };
 
        });
    </script>
</head>
<body>
<form style="border:6px solid #00E7FF;" id="form" name="form" method="post" action="gonder.php">
   <tr>
      <td><strong>Adı Soyadı</strong></td>
      <td><strong>:</strong></td>
      <td><label for="mus_adi"></label>
     <input name="mus_adi" id="search"  value="" type="text" size="25" title="Lütfen Müşteri Adı Yazınız!" required style="border:2px inset #00E7FF; padding:5px; "/>
</td>
    </tr>
    <tr>
      <td><strong>Telefon</strong></td>
      <td><strong>:</strong></td>
      <td><label for="mus_telefon"></label>
      <input name="mus_telefon" maxlength="11" title="Lütfen Telefon Numarası Yazınız!" type="text" id="telefon" size="25" value=""  required style="border:2px inset #00E7FF; padding:5px; "/></td> </tr>
          <td width="98"><input type="submit" name="submit" id="submit" value="Formu Gönder" /></td>
</form>
    
</body>
</html>

24-02-2016, 19:46:16

#7

siyahincim

Mavicap adlı üyeden alıntı: mesajı görüntüle

Hocam şimdi vereceğim kodu deneyiniz muhtemelen probleminiz çözülecektir.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>Auto</title>
   <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<style>
 
   //* search *//
 
  #search {
            width: 300px;
        }
        .ui-autocomplete li a {
            overflow: hidden;
            display: block;
        }
        .ui-autocomplete li a img {
            float: left;
            margin-right: 10px;
            height: 40px;
        }
        .ui-autocomplete li a .username {
            display: block;
            font-size: 12px;
            line-height: 17px;
         background-color:#000;
        }
        .ui-autocomplete li a .email {
            display: block;
            font-size: 12px;
            color: #999;
        }
      .ui-autocomplete-loading {
   background: #fff url(ajax-loader.gif) no-repeat 97%;
 
}  
 
   //* search *//
    
    
</style>
<script>
        $(function(){
 
            var $search = $('#search');
 
            $search.autocomplete({
                source: 'kapi.php',
                focus: function(event, ui){
                    $search.val(ui.item.mus_telefon);
                },
                select: function(event, ui){
//                    window.location.href = 'https://www.google.com/#q=' + ui.item.mus_adi;
              $('#telefon').val(ui.item.mus_telefon);
                }
            });
 
            $search.data('.ui-autocomplete-loading')._renderItem = function( ul, item ){
 
               
 
                return $li.appendTo(ul);
 
            };
 
        });
    </script>
</head>
<body>
<form style="border:6px solid #00E7FF;" id="form" name="form" method="post" action="gonder.php">
   <tr>
      <td><strong>Adı Soyadı</strong></td>
      <td><strong>:</strong></td>
      <td><label for="mus_adi"></label>
     <input name="mus_adi" id="search"  value="" type="text" size="25" title="Lütfen Müşteri Adı Yazınız!" required style="border:2px inset #00E7FF; padding:5px; "/>
</td>
    </tr>
    <tr>
      <td><strong>Telefon</strong></td>
      <td><strong>:</strong></td>
      <td><label for="mus_telefon"></label>
      <input name="mus_telefon" maxlength="11" title="Lütfen Telefon Numarası Yazınız!" type="text" id="telefon" size="25" value=""  required style="border:2px inset #00E7FF; padding:5px; "/></td> </tr>
          <td width="98"><input type="submit" name="submit" id="submit" value="Formu Gönder" /></td>
</form>
    
</body>
</html>

$('#telefon').val(ui.item.mus_telefon); kodları inceledim burada telefon nosu göster id=telefon formda mus_telefon kısmı id="telefon" eklediniz ve sonuç istediğim gibi. Çok teşekkür ederim hocam.

29-02-2016, 21:54:06

#8

siyahincim

<!DOCTYPE HTML>
<html lang="en-US">
<head>
***<meta charset="UTF-8">
***<title>Auto</title>
***<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
***<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
***<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />
<style>
**
***//* search *//
**
**#search {
************width: 300px;
********}
********.ui-autocomplete li a {
************overflow: hidden;
************display: block;
********}
********.ui-autocomplete li a img {
************float: left;
************margin-right: 10px;
************height: 40px;
********}
********.ui-autocomplete li a .username {
************display: block;
************font-size: 12px;
************line-height: 17px;
*********background-color:#000;
********}
********.ui-autocomplete li a .email {
************display: block;
************font-size: 12px;
************color: #999;
********}
******.ui-autocomplete-loading {
***background: #fff url(ajax-loader.gif) no-repeat 97%;
**
}* 
**
***//* search *//
*****
*****
</style>
<script>
********$(function(){
**
************var $search = $('#search');
**
************$search.autocomplete({
****************source: 'kapi.php',
****************focus: function(event, ui){
********************$search.val(ui.item.mus_telefon);
****************},
****************select: function(event, ui){
//******************* window.location.href = 'https://www.google.com/#q=' + ui.item.mus_adi;
**************$('#telefon').val(ui.item.mus_telefon);
****************}
************});
**
************$search.data('.ui-autocomplete-loading')._renderItem = function( ul, item ){
**
****************
**
****************return $li.appendTo(ul);
**
************};
**
********});
****</script>
</head>
<body>
<form style="border:6px solid #00E7FF;" id="form" name="form" method="post" action="gonder.php">
***<tr>
******<td><strong>Adı Soyadı</strong></td>
******<td><strong>:</strong></td>
******<td><label for="mus_adi"></label>
*****<input name="mus_adi" id="search"* value="" type="text" size="25" title="Lütfen Müşteri Adı Yazınız!" required style="border:2px inset #00E7FF; padding:5px; "/>
</td>
****</tr>
****<tr>
******<td><strong>Telefon</strong></td>
******<td><strong>:</strong></td>
******<td><label for="mus_telefon"></label>
******<input name="mus_telefon" maxlength="11" title="Lütfen Telefon Numarası Yazınız!" type="text" id="telefon" size="25" value=""* required style="border:2px inset #00E7FF; padding:5px; "/></td> </tr>
**********<td width="98"><input type="submit" name="submit" id="submit" value="Formu Gönder" /></td>
</form>
*****
</body>
</html>

Arkadaşlar akşamdır araştırdım denemeler yaptım bir çözüm bulamadım bu arama döngüsü içerisinde her hangi bir veriye ulaşamadığım zaman bir link eklemek istiyorum " Kayıt Yok - Kayıt Oluştur " Mümkün mü?

01-03-2016, 10:33:46

#9

taSManiaN

jQuery kodunuzdaki search işleminden sonra bir virgül koyup aşağıdaki kodu altına ekleyin;

        response: function(event, ui) {
            if (ui.content.length === 0) {
                $("#sonucyok").html('<a href="adres">Kayıt yok, eklemek için tıkla</a>');
            } else {
                $("#sonucyok").empty();
            }
        }

sonucyok diye bir id li div tanımlayıp gerekli işlemleri yapabilirsiniz.