2015-12-10 57 views
2

我是一個初學者,我試圖顯示一個div到我的單選按鈕。我解釋我的代碼中的問題。自動完成框在ajax調用之後顯示。Div技巧嵌入文本?

<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; 
} 
+0

你使用任何與此CSS? – Bassie

+0

我添加CSS文件 – Seham

回答

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; 
} 
+0

相同的結果,DIV按動按鈕向右 – Seham

+0

檢查[這個小提琴(http://jsfiddle.net/k4mr1tq5/)這似乎是在鉻有工作,你有什麼更多代碼分享? – Bassie

+0

div「autosuggistion」顯示後,js的電話就像谷歌搜索suggistion框。是像DataList的標籤,但蔭採用div和UL – Seham