samedi 9 mai 2015

auto suggest search box using php-ajax

i tried a downloaded code for auto-suggest search box but it didn't work..can someone please help me :( it does not display anything from my database..I'm still new in this programming language especially in using ajax and javascript... :( here's my codes:

dbcon2.php

<?php 

$con2['host'] = 'localhost';
$con2['user'] = 'root';
$con2['pass'] = 'thirteen';
$con2['db'] = 'pis';
$sel2 = mysql_connect($con2['host'], $con2['user'], $con2['pass']);
mysql_select_db($con2['db'], $sel2);
mysql_set_charset("utf-8");

$datab2 = $con2['db'];?>

set_creditlimit.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete search using php, mysql and ajax</title>
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<script type="text/javascript" src="assets/js/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>
</head>
<body>
<div id="page-wrapper">
    <div id="page-inner">
        <div class="row">
            <div class="col-md-12">
                <h2>ACL</h2>
            </div> <!-- <div class="col-md-12"> -->
        </div> <!-- <div class="row"> -->

        <hr />
        <div class="row">
            <div class="col-md-12">
                <!-- Start of Form -->
                <div class="panel panel-success">
                    <div class="panel-heading">
                         Set-up Allowable Credit Limit
                    </div> <!-- <div class="panel-heading"> -->
                    <!-- End of Heading -->
                    <!-- Start of Body -->
                    <div class="panel-body">
                        <form class="form-horizontal">
                            <div class="row">
                                <div class="col-md-6 col-md-offset-3">
                                    <label>Search Employee:</label>
                                    <input type="text" id="searchid" placeholder="Search Employee" class="search">
                                </div>
                                <div id="result"></div>
                            </div>
                            <br />

                            <!-- ------------- -->

                            <div class="row">
                                <div class="col-md-6 col-md-offset-3">
                                    <label>Position:</label>
                                    <input class="form-control" disabled>
                                </div>
                            </div>
                            <br />

                            <!-- ------------- -->

                            <div class="row">
                                <div class="col-md-6 col-md-offset-3">
                                    <label>Department:</label>
                                    <input class="form-control" disabled>
                                </div>
                            </div>
                            <br />

                            <!-- ------------- -->

                            <div class="row">
                                <div class="col-md-6 col-md-offset-3">
                                    <label>Business Unit:</label>
                                    <input class="form-control" disabled>
                                </div>
                            </div>
                            <br />

                            <!-- ------------- -->

                            <div class="row">
                                <div class="col-md-6 col-md-offset-3">
                                    <label>Allowed Credit Limit:</label>
                                    <input class="form-control">
                                </div>
                            </div>
                            <br />
                            <br />

                            <!-- ------------- -->

                            <div class="control-group">
                                <div class="controls">
                                    <center>
                                        <button class="btn btn-success btn-lg"><i class="glyphicon glyphicon-hand-right fa-1x">&nbsp;Submit</i></button>
                                    </center>
                                </div>
                            </div>

                        </form>
                    </div> <!-- <div class="panel-body"> -->
                </div> <!-- <div class="panel panel-success"> -->
            </div> <!-- <div class="col-md-12"> -->
        </div> <!-- <div class="row"> -->

    </div> <!-- <div id="page-inner"> -->
</div> <!-- <div id="page-wrapper"> -->
</body>
</html>

search.php

<?php

include('dbcon2.php');
if ($_POST) 
{
$q = $_POST['search'];
$sql_res = mysql_query("SELECT emp_id, name from employee3 where emp_id like '%$q%' or name like '%$q%' order by emp_id LIMIT 5 ");
while ($row = mysql_fetch_array($sql_res)) 
{
$emp_id = $row['emp_id'];
$name = $row['name'];
$b_emp_id = '<strong>'.$q.'</strong>';
$b_name = '<strong>'.$q.'</strong>';
$fina_emp_id = str_ireplace($q, $b_emp_id, $emp_id);
$final_name = str_ireplace($q, $b_name, $name);
?>
<div class="show" align="left">
    <span class="name"><?php echo $fina_emp_id; ?></span>
</div>
<?php
}
} 
?>

Aucun commentaire:

Enregistrer un commentaire