Wie klickt man einen Namen aus Auto-Vervollständigen-Textfeld?

Ich habe eine Liste von Namen, die aus meiner Datenbank in einem Auto-Vervollständigen-Textfeld abgerufen werden..Wenn ich auf eines der Elemente im Auto-Vervollständigen-Textfeld klicke, muss ich diesen Datensatz anzeigen, aber jetzt kann ich die Datensätze nicht anzeigen. Jemand bitte helfen Sie mir ... Hier mein Code .....Wie klickt man einen Namen aus Auto-Vervollständigen-Textfeld?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Autocomplete search using php, mysql and ajax</title> 
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
    $(".search").keyup(function() 
    { 
     var searchid = $(this).val(); 
     var dataString = 'search=' + searchid; 
     if (searchid != '') 
     { 
      $.ajax(
      { 
       type: "POST", 
       url: "search.php", 
       data: dataString, 
       cache: false, 
       success: function (html) 
       { 
        $("#result").html(html).show(); 
       } 
      }); 
     } 
     return false; 
    }); 
    jQuery("#result").live("click", function (e) 
    { 
     var $clicked = $(e.target); 
     var $name = $clicked.find('.name').html(); 
     var decoded = $("<div/>").html($name).text(); 
     $('#searchid').val(decoded); 
    }); 
    jQuery(document).live("click", function (e) 
    { 
     var $clicked = $(e.target); 
     if (!$clicked.hasClass("search")) 
     { 
      jQuery("#result").fadeOut(); 
     } 
    }); 
    $('#searchid').click(function() 
    { 
     jQuery("#result").fadeIn(); 
    }); 
}); 
</script> 
<style type="text/css"> 
    body{ 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:18px; 
    } 
    .content{ 
    width:50x; 
    margin:0 auto; 
} 
#searchid 
{ 
    width:200px; 
    border:solid 1px #000; 
    padding:10px; 
    font-size:14px; 
} 
#result 
{ 
    position:absolute; 
    width:200px; 
    padding:10px; 
    display:none; 
    margin-top:-1px; 
    border-top:0px; 
    overflow:hidden; 
    border:1px #CCC solid; 
    background-color: white; 
} 
.show 
{ 

    font-size:15px; 
    height:30px; 
} 
.show:hover 
{ 
    background:#4c66a4; 
    color:#FFF; 
    cursor:pointer; 
} 
</style> 
</head> 

<body> 
<form autocomplete="off"> 
    <div class="content"> 
     <input type="text" class="search" id="searchid" name="search" placeholder="Search for people" />&nbsp; &nbsp; Ex:arunkumar, shanmu, vicky<br /> 
     <div id="result"> 
     </div> 
    </div> 
    </form> 
    </body> 
</html>

search.php

<?php 
include('connection.php'); 
if($_POST) 
{ 
    $search=$_POST['search']; 
    $sql_res=mysql_query("select * from students WHERE name LIKE '$search%'  OR name='$search'"); 
     while($row=mysql_fetch_array($sql_res)) 
     { 
      $username=$row['name']; 
      $b_username='<strong>'.$search.'</strong>'; 
      $final_username = str_ireplace($search, $b_username, $username); 
?> 
<div class="show" align="left"> 
<?php echo $final_username;?></div> 
<?php 
     } 
    } 
    ?> 
    <?php 
    if($_GET!=NULL) 
    { 
     $search=$_GET['search']; 
     echo $search; 
     $sql=mysql_query("select * from employee where name='$search'"); 
    ?> 
    <table border="1"> 
    <tr><th>id</th><th>Name</th><th>Email</th><th>Age</th><th>School Name</th>  </tr> 
    <?php 
    while($row=mysql_fetch_array($sql)) 
    { 
    ?> 
    <tr> 
    <td><?php echo $row['id'];?></td> 
    <td><?php echo $row['name'];?></td> 
    <td><?php echo $row['email'];?></td> 
    <td><?php echo $row['age'];?></td> 
    <td><?php echo $row['school_name'];?></td> 
    </tr> 
    <?php 
    } 
} 
?> 
</table>

Quelle

2016-05-03 RASHEED RAMSHI

Was ist 'jQuery (Dokument) .live (" click ")'? Live-Ereignis ist in jQuery 1.8 ebenfalls veraltet. – Huelfe

Vermutung, er wollte etwas wie $ ("# result"). On ("click", ".name", function (e) ' – skobaljic

können Sie Code in jsfiddle hinzufügen? –

Mit diesem Code, wird es funktionieren. Ich habe den Code bearbeitet und mit meiner Testtabelle

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Autocomplete search using php, mysql and ajax</title> 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<style type="text/css"> 
    body{ 
    font-family:Tahoma, Geneva, sans-serif; 
    font-size:18px; 
    } 
    .content{ 
    width:50x; 
    margin:0 auto; 
} 
#searchid 
{ 
    width:200px; 
    border:solid 1px #000; 
    padding:10px; 
    font-size:14px; 
} 
#result 
{ 
    position:absolute; 
    width:200px; 
    padding:10px; 
    display:none; 
    margin-top:-1px; 
    border-top:0px; 
    overflow:hidden; 
    border:1px #CCC solid; 
    background-color: white; 
} 
.show 
{ 

    font-size:15px; 
    height:30px; 
} 
.show:hover 
{ 
    background:#4c66a4; 
    color:#FFF; 
    cursor:pointer; 
} 
</style> 
</head> 

<body> 
<form autocomplete="off"> 
<div class="content"> 
<input type="text" class="search" id="searchid" name="search" placeholder="Search for people" />&nbsp; &nbsp; Ex:arunkumar, shanmu, vicky<br /> 
    <div id="result"> 
    </div> 

    <div id="records"></div> 
    </div> 
    </form> 

<script type="text/javascript"> 
jQuery(function(){ 
    jQuery(".search").keyup(function() 
    { 
    var searchid = jQuery(this).val(); 
    var dataString = 'search='+ searchid; 
    if(searchid!='') 
    { 
     jQuery.ajax({ 
     type: "POST", 
     url: "search.php", 
     data: dataString, 
     cache: false, 
     success: function(html) 
     { 
     jQuery("#result").html(html).show(); 
     } 
     }); 
    }return false;  
    }); 
}); 

function selValue(id, value){ 
    jQuery('#searchid').val(value); 
    displayRec(id); 
    jQuery("#result").html('').hide(); 
} 

function displayRec(id){ 
    var dataString = 'searchid='+ id; 
    jQuery.ajax({ 
    type: "POST", 
    url: "search.php", 
    data: dataString, 
    cache: false, 
    success: function(data) 
    { 
    jQuery("#records").html(data); 
    } 
    }); 
} 
</script> 

    </body> 
</html>

search.php getestet

<?php 
mysql_connect("localhost", "root", ""); 
mysql_select_db("cdcol"); 


if(isset($_POST['search'])) 
{ 

    $search = $_POST['search']; 

    $search=$_POST['search']; 
    $sql_res=mysql_query("select * from cds WHERE interpret LIKE '%$search%'  OR interpret='$search'"); 
    while($row=mysql_fetch_array($sql_res)) 
    { 
     $id=$row['id']; 
     $username=$row['interpret']; 
     $b_username='<strong>'.$search.'</strong>'; 
     $final_username = str_ireplace($search, $b_username, $username); 
     ?> 
     <div class="show" align="left" onclick="return selValue('<?php echo $id; ?>', '<?php echo $final_username; ?>');"><?php echo $final_username;?></div> 
    <?php 
     } 
} 

if(isset($_POST['searchid'])) 
    { 

     $search=$_POST['searchid']; 
     $sql=mysql_query("select * from cds where id='$search'");?> 
    <table border="1"> 
    <tr><th>id</th><th>Name</th><th>Email</th><th>Age</th></tr> 
    <?php 
     while($row=mysql_fetch_assoc($sql)) 
     { 
     ?> 
    <tr> 
    <td><?php echo $row['id'];?></td> 
    <td><?php echo $row['interpret'];?></td> 
    <td><?php echo $row['titel'];?></td> 
    <td><?php echo $row['jahr'];?></td> 
    </tr> 
     <?php 
     } 
    } 
?> 
</table>

Lassen Sie mich wissen, wenn Sie mit diesem Code überprüfen.

Quelle

2016-05-03 10:06:22 Lavanya

Wie klickt man einen Namen aus Auto-Vervollständigen-Textfeld?

Antwort

Verwandte Themen