Question

我是初学者，我正试图在我的单选按钮上显示一个div。我在我的代码中解释了这个问题。在ajax调用之后显示自动完成框。

<input type="text" name="search" id="search" autofocus autocomplete="off" />
<input type="submit" id="search_button" title="Check" value="Check"/>

//the suggesstion div move radio button to the right I need it up of the radio buttons !
<div id="suggesstion-box"></div>

<label>Search by :</label>
<input id="radio" name="radio" value="name" type="radio"/>
<span id="radio_text"> name</span>
<input id="radio" name="radio" value="age" type="radio">
<span id="radio_text"/>age</span>

ajax.js获取数据

$(document).ready(function(){ 
    $("#search").keyup(function(){
            if ($("#search").val() == "")
            $("#suggesstion-box").hide();
        else{
        $.ajax({
        type: "GET",
        url: "getinfo.php",
        data:'keyword='+$(this).val(),
        success: function(data){
                    console.log(data);
            $("#suggesstion-box").show();
                        document.getElementById("suggesstion-box").innerHTML=data;
            //$("#suggesstion-box").html("data");
            $("#search").css("background","#FFF");
        }
        }); 
            }//else box not empty 

    });
        console.log("print it");
});

function select(val) {
$("#search").val(val);
$("#suggesstion-box").hide();
}

getinfo.php将数据打印到意见箱

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
//include('database.php');
//Sanitize the POST values
$hint = $_GET['keyword'];
$i = 0;

$qry1 = "SELECT * FROM Journals where Journal_name like '" . $hint . "%' AND is_reported=1 LIMIT 3 ";
$qry2 = "SELECT * FROM Publishers where Publisher_Name like '" . $hint . "%' AND is_reported=1 LIMIT 2;";
//$result = mysql_query($qry1);
//$result2 = mysql_query($qry2);

$data = array();
$result2 = $db_handle->runQuery($qry2);
$result1 = $db_handle->runQuery($qry1);
if (!empty($result2)) {
    ?>
    <ul id="country-list">
        <?php
        foreach ($result2 as $info2) {
            ?>
            <li onClick="select('<?php echo $info2['Publisher_Name']; ?>');"><?php echo $info2['Publisher_Name']; ?></li>
        <?php
        } if (empty($result1)){
            ?>
        </ul>
        <?php  } }
    if (!empty($result1)) {
        if (empty($result2)){

            ?>
        <ul id="country-list">
        <?php
        }
            foreach ($result1 as $info) {
                ?>
                <li onClick="select('<?php echo $info['Journal_name']; ?>');"><?php echo $info['Journal_name']; ?></li>
        <?php } ?>
        </ul>
<?php
}
?>

s.css

#country-list{float:left;list-style:none;margin:0;padding:0;width:210px; display: inline;}
#country-list li{padding: 10px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;}
#country-list li:hover{background:#F0F0F0;}
#search {
    width: 300px;
    height: 10px;
    border: thin solid #00B6A8;
    margin-top: 10px;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    border-collapse: collapse;
    -webkit-box-shadow: 0px 0px 2px;
    box-shadow: 0px 0px 2px;
    padding: 10px;
    display: inline;
        //border: #F0F0F0 1px solid;
}
#suggesstion-box {
    display: inline;
}
#radio {
    margin-top: 10px;
    margin-left: 30px;
}
#radio_text {
    color: #545454;
    font-size: normal;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-style: normal;
    font-weight: normal;
}
#label {
    /*margin-left: -210px;*/
    color: #00B6A8;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-weight: normal;
    font-size: medium;
}

Answer 1

尝试：

<div id="suggesstion-box"></div>

<div class="wrapper">
    <label>Search by :</label>
    <input id="radio" name="radio" value="name" type="radio"/>
    <span id="radio_text"> name</span>
    <input id="radio" name="radio" value="age" type="radio">
    <span id="radio_text"/>age</span>
</div>

在css中：

.wrapper {
position: absolute;
}

Div技巧内联文字？

1 个答案: