如何使用基於第一個文本框輸入的數據填充多個文本框？

可以說我有一個有3列的數據庫表：accref，company和contact以及3個匹配的文本框。如何使用基於第一個文本框輸入的數據填充多個文本框？

我已經爲accref文本框實現了自動建議功能，該功能將爲accref列建議數據庫值。我想要的是，當我點擊accref文本框中的建議值時，我希望公司和聯繫人框填寫與accref位於同一行的數據。

例如，

表：

accref：HFHFHF

公司：所述電子政務

接觸：奧巴馬

當我在accref文本框中鍵入HFH，所述HFHFHF記錄顯示爲一個建議。然後當我對這一建議點擊（它顯示爲一個div），我希望它填補了該公司的文本框「論政府」，然後接觸文本框與「奧巴馬」

的index.php：

<html> 
<head> 
<title>tst</title> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.0.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(".search_keyword").keyup(function() 
{ 
    var search_keyword_value = $(this).val(); 
    var dataString = 'search_keyword='+ search_keyword_value; 
    if(search_keyword_value!='') 
    { 
     $.ajax({ 
      type: "POST", 
      url: "search.php", 
      selectFirst: true, 
      data: dataString, 
      cache: false, 
      success: function(html) 
       { 
        $("#result").html(html).show(); 
       } 
     }); 
    } 
    return false; 
}); 

$("#result").live("click",function(e){ 
    var $clicked = $(e.target); 
    var $name = $clicked.find('.accref_name').html(); 
    var decoded = $("<div/>").html($name).text(); 
    $('#search_keyword_id').val(decoded); 



}); 

$(document).live("click", function(e) { 
    var $clicked = $(e.target); 
    if (! $clicked.hasClass("search_keyword")){ 
     $("#result").fadeOut(); 
    } 
}); 


    $("#") 



}); 


</script> 

</script> 
</head> 

<body> 
    <div class="main"> 
     <input type="text" class="search_keyword" id="search_keyword_id" placeholder="Cus ref"/> 
     <input type="text" class="comp_get" placeholder="Company"/> 



     <div id="result"></div> 

    </div> 
</body> 
</html>

而且search.php中：

<?php 
    include('db_connection.php'); 
    if(isset($_POST['search_keyword'])) 
    { 
     $search_keyword = $dbConnection->real_escape_string($_POST['search_keyword']); 
     $sqlQuery="SELECT db_accref, db_company FROM tbl_customers WHERE db_accref LIKE '%$search_keyword%'"; 
     $resAccref=$dbConnection->query($sqlQuery); 

     if($resAccref === false) { 
      trigger_error('Error: ' . $dbConnection->error, E_USER_ERROR); 
     }else{ 
      $rows_returned = $resAccref->num_rows; 
        } 

    $bold_search_keyword = '<strong>'.$search_keyword.'</strong>'; 
    if($rows_returned > 0){ 
      while($rowAccref = $resAccref->fetch_assoc()) 
      {  
       echo '<div class="show" align="left"><span class="accref_name">'.str_ireplace($search_keyword,$bold_search_keyword,$rowAccref['db_accref']).'</span></div>';  
      } 
     }else{ 
      echo '<div class="show" align="left"></div>'; 
     } 
    } 
?>

我怎樣才能做到這一點？

感謝您的任何幫助和抱歉，如果我沒有足夠清楚的問題。

邁克

來源

2016-06-07 callum mikaelson

當有人選擇/點擊的值，發送另一個Ajax請求，以獲得更多的信息，並填寫相應的欄目。 –

您將需要添加一個偵聽器點擊/ select事件，這樣當你在第一個下拉列表點擊您的選擇，一個PHP函數被調用那麼就會在數據庫中搜索對應的行的數據，並將其返回。然後，在jQuery中，您可以使用返回的數據更新html。

例如，您在上面的代碼中有類似的東西。你在調用'search.php'的keyup事件上有一個監聽器，它返回用於更新div #result的數據。這幾乎是你需要做的事情，而是傾聽當有人從下拉列表中選擇時發生的事件。

來源

2016-06-07 22:04:17

請問您的tbl_customers表中是否包含accref,company和contact？如果是這樣，讓所有提取並返回到Ajax請求。讓我們更改您的search.php，我們將獲取所有列並使用prepared statement。我們將使用data標籤存儲每一行的每個環節<a></a>結果：

<?php 

    include('db_connection.php'); 

    if(isset($_POST['search_keyword'])) 
    { 

     $search_keyword = '%'.$_POST["search_keyword"].'%'; 

     $stmt = $dbConnection->prepare("SELECT db_accref, db_company, db_contact FROM tbl_customers WHERE db_accref LIKE ?"); 
     $stmt->bind_param("s", $search_keyword); 
     $stmt->execute(); 
     $stmt->bind_result($accref, $company, $contact); 
     while($stmt->fetch()){ 

      echo '<div class="show" align="left"> 
         <span class="accref_name"> 
          <a href="#" data-accref="'.$accref.'" 
             data-company="'.$company.'" 
             data-contact="'.$contact.'" 
          class="suggestion">'.$accref.'</a> 
         </span> 
        </div>'; 

     } 
     $stmt->close(); 

    } 
?>

然後讓創建腳本，被點擊的建議時，它將把它的數據轉換成相應的文本字段。現在讓我們使用.on()爲.live()是deprecated在jQuery 1.7：

$(document).on("click", ".suggestion", function(e){ 

    e.preventDefault(); 

    var elem = $(this), 
     accref = elem.attr('data-accref'), 
     company = elem.attr('data-company'), 
     contact = elem.attr('data-contact'); 

    $("#accref").val(accref); /* ASSUMING THAT YOUR ACCREF TEXT FIELD HAS AN ID OF accref */ 
    $("#company").val(company); /* ASSUMING THAT YOUR COMPANY TEXT FIELD HAS AN ID OF company */ 
    $("#contact").val(contact); /* ASSUMING THAT YOUR CONTACT TEXT FIELD HAS AN ID OF contact */ 

    return false; 

});

來源

2016-06-08 07:08:48

如何使用基於第一個文本框輸入的數據填充多個文本框？

回答

相關問題