javascript - Autosuggest tutorial with PHP and MySQL -
i found tutorial on how create simple autosuggest php & mysql. tutorial i'm using: http://www.2my4edge.com/2013/08/autocomplete-search-using-php-mysql-and.html
when try tutorial, i'm finding bug. when search, , click on image or text, item not selected. have click in "white" area. have tried change script, still have same problem, because still don't know javascript.
this tutorial script:
index.php
<!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 , 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: 900px; margin: 0 auto; } #searchid { width: 500px; border: solid 1px #000000; padding: 10px; font-size: 14px; } #result { position: absolute; width: 500px; padding: 10px; display: none; margin-top: -1px; border-top: 0px; overflow: hidden; border: 1px #cccccc solid; background-color: white; } .show { padding: 10px; border-bottom: 1px #999999 dashed; font-size: 15px; height: 50px; } .show:hover { background: #4c66a4; color: #ffffff; cursor: pointer; } </style> </head> <body> <div class="content"> <form method="post"> <input type="text" class="search" id="searchid" name="searchid" placeholder="search people"/> ex:arunkumar, shanmu, vicky<br/> </form> <div id="result"> </div> </div> </body> </html> search.php
<?php include('db.php'); if($_post) { $q=$_post['search']; $sql_res=mysql_query("select id,name,email autocomplete name '%$q%' or email '%$q%' order id limit 5"); while($row=mysql_fetch_array($sql_res)) { $username=$row['name']; $email=$row['email']; $b_username='<strong>'.$q.'</strong>'; $b_email='<strong>'.$q.'</strong>'; $final_username = str_ireplace($q, $b_username, $username); $final_email = str_ireplace($q, $b_email, $email); ?> <div class="show" align="left"> <img src="author.png" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span> <br/><?php echo $final_email; ?><br/> </div> <?php } } ?> please me fix bug, because want apply autosuggest website.
in search.php file, instead of
< div class="show" align="left" > add
<a class="show" align="left" style="display:block" href="javascript:void(0)" onclick="$('#searchid').val(this.val)"> i didnt checked it, check syntax error @ onclick function, work
Comments
Post a Comment