Autosuggest tutorial with PHP and MySQL

Question

I found a tutorial on how to create a simple autosuggest with PHP & MySQL. This is the tutorial I'm using: http://www.2my4edge.com/2013/08/autocomplete-search-using-php-mysql-and.html

When I try this tutorial, I'm finding a bug. When I search, and click on the image or text, the item will not be selected. You have to click in the "white" area. I have tried to change the script, but I still have the same problem, because I still don't know much about JavaScript.

This is the 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 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: 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 for people"/>&nbsp; &nbsp; 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 from autocomplete where name like '%$q%' or email like '%$q%' order by 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>&nbsp;<br/><?php echo $final_email; ?><br/>
        </div>
<?php
    }
}
?>

Please help me to fix this bug, because I want to apply this autosuggest for my website.

if you can, you should [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). They are no longer maintained and are [officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). Learn about [prepared statements](http://en.wikipedia.org/wiki/Prepared_statement) instead, and consider using PDO, [it's really not hard](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Jun 04 '15 at 12:58
I've updated your post to clear up grammar, spelling and code formatting. You may want to include a bit more about what the desired behavior is. — Heretic Monkey, Jun 04 '15 at 18:06
@JayBlanchard : Thank's for suggestion, i will learn about PDO. — yogaboyz88, Jun 04 '15 at 21:17
@MikeMcCaughan : Thank's for correction, i'am sorry my english language not good. :) — yogaboyz88, Jun 04 '15 at 21:18

score 0 · Answer 1 · answered Jun 04 '15 at 13:03

0

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, but just check for syntax error at onclick function, it will work

answered Jun 04 '15 at 13:03

Dinesh Patil

1,042
10
13

Thank's for Great answer, it's almost succeeded. but still not work when i click image and username.. when i click email, it's work is there any other suggestions for me? :) – yogaboyz88 Jun 04 '15 at 21:22

Autosuggest tutorial with PHP and MySQL

1 Answers1