Question

我尝试了自动建议搜索框的下载代码，但它没有用。它不会显示我的数据库中的任何内容。我在这种编程语言中仍然是新手，特别是在使用AJAX和JavaScript时。

这是我的代码：

dbcon2.php

assign

set_creditlimit.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'];?>

的search.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>
<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>

Answer 1

您在ajax调用中传递了错误的数据格式。

应该是这样的：

data: { search: searchid }

尝试这个，我相信它应该有用。

请参阅：http://api.jquery.com/jquery.ajax/

使用PHP和AJAX自动建议搜索框

1 个答案: