search the database based on the value selected fr

I have a code for cascade drop down list that works perfectly fine, there are two drop down list and the 2nd one depends on the first one, however i wish to perform a search (from database table )based on the parameter that is choosed from the second drop down list. i have the code for search also, but i don't know how to combine the search code with the cascade drop down list code

There are two pages for the cascade drop down list. First is index.php and second is fetch_state.php. there code is

index.php

<body>
    <div id="container">
        <div id="body">
            <div class="mhead"><h2>Cascaded dropdown with jQuery Ajax and PHP - InfoTuts</h2></div>
                <form class="form-horizontal" role="form" action="" enctype="multipart/form-data" method="post">
                    <div id="dropdowns">
                        <div id="center" class="cascade">
                            <?php
                                $sql = "SELECT * FROM search_parent ORDER BY searchname";
                                $query = mysqli_query($con, $sql);
                            ?>
                            <label>Country:
                                <select name="country" id = "drop1">
                                    <option value="">Please Select</option>
                                        <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
                                    <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["searchname"]; ?></option>
                                    <?php } ?>
                                </select>
                            </label>
                        </div>

                        <div class="cascade" id="state"></div> 
                        <div id="city" class="cascade"></div> 
                    </div>

                    <div class="col-md-4 col-sm-6">
                        <div class="media-body">
                            <div class="col-md-8">
                                <input class="btn btn-primary" value="Search" type="submit" name="submit">
                            </div>
                        </div>
                    </div>
                </form>         
        </div>
    </div>

    <script src="jquery-1.11.1.js"></script>
    <script>
    $(document).ready(function()
        {
            $("select#drop1").change(function(){
                var parent_id =  $("select#drop1 option:selected").attr('value'); 
                // alert(parent_id);    
                $("#state").html( "" );
                //$("#city").html( "" );
                if (parent_id.length > 0 ){ 
                    $.ajax({
                        type: "POST",
                        url: "fetch_state.php",
                        data: "parent_id="+parent_id,
                        cache: false,
                        beforeSend: function (){ 
                                $('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
                            },
                        success: function(html){    
                                $("#state").html( html );
                            }
                        });
                    } 
                });
        });
    </script>
</body>

fetch_state.php

<?php
include("connection.php");
$parent_id = trim(mysql_escape_string($_POST["parent_id"]));

$sql = "SELECT * FROM features WHERE parent_id = ".$parent_id ." ORDER BY fname";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>State: 
<select name="state" id="drop2">
    <option value="">Please Select</option>
    <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
    <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["fname"]; ?></option>
    <?php } ?>
</select>
</label>
<?php 
    }
?>
<script src="jquery-1.11.1.js"></script>

the code above helps in my cascade list now the code for search that i wish to perform

<?php
$fname = mysqli_real_escape_string($con, $_POST['fname']);

$sql1 = "SELECT * FROM office WHERE fname LIKE '%$fname%';
$result = mysqli_query($con, $sql1);

if (mysqli_num_rows($result) > 0) 
    {
        while($row = mysqli_fetch_assoc($result)) {
        echo  $row["fname"];
        //would like to get all the data from the table here
    }
} else {
    echo "0 results";
}
mysqli_close($con);
?>

As i mentioned earlier also, when the user selects the value from the second dropdown list i wish to get the search result based on the parameter that is selected in the 2nd drop down list and the result should be displayed on the same page below the search bar

after your html code add

<div class="showsearch"></div>

js code

$(document).ready(function(){
    $('#drop2').on('change',function(){
         var fname = $(this).val();
         // rename your file which include $fname  with get_search_data.php
         if(fname !== ""){
            $.post('get_search_data.php',{fname: fname},function(data){
            $('.showsearch').html(data);
            });
          }
    });
});

after that code it should display the $row['fname'] to showsearch div
you have to include("connection.php"); in get_search_data.php

get_search_data.php

<?php
include("connection.php");
if(isset($_POST['fname'])){
$fname = mysqli_real_escape_string($con, $_POST['fname']);
}
$sql1 = 'SELECT * FROM office WHERE fname LIKE "%'.$fname.'%"';
$result = mysqli_query($con, $sql1);

if (mysqli_num_rows($result) > 0) 
    {
        while($row = mysqli_fetch_assoc($result)) {
        echo  $row["fname"]; // this data should appear in showsearch div
    }
} else {
    echo "0 results";
}
mysqli_close($con);
?>