Question

假设我有一个包含3列的数据库表：accref，公司和联系人以及3个匹配的文本框。

我已经为accref文本框实现了自动提示功能，该功能将建议accref列的数据库值。我想要的是当我点击accref文本框中的建议值时，我希望公司和联系人框填充与accref位于同一行的数据。

例如，

表：

accref：HFHFHF

公司：政府

联系人：巴拉克奥巴马

当我在accref文本框中键入HFH时，HFHFHF记录显示为建议。然后，当我点击该建议（它显示为div）时，我希望它用“政府”填写公司文本框，然后用“Barack Obama”填写联系人文本框

的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>';   
        }
    }   
?>

我该怎么做？

感谢您提供任何帮助，如果我没有说清楚这个问题，那就很抱歉。

麦克

Answer 1

您需要为click / select事件添加一个侦听器，以便在第一个下拉列表中单击您的选择时，将调用php函数，然后在数据库中搜索相应的数据行，并将其返回。然后，在jQuery中，您可以使用返回的数据更新html。

例如，您在上面的代码中有类似的东西。您在keyup事件上有一个监听器，它调用'search.php'，它返回用于更新div #result的数据。这几乎是您需要做的事情，而是监听有人从下拉列表中选择时发生的事件。

Answer 2

您的tbl_customers表格是否包含accref，company和contact？如果是这样，让所有人获取它并将其返回给Ajax请求。让我们更改您的search.php我们将获取所有列并使用prepared statement。我们将使用<a></a>标记存储每个链接data的每行结果：

<?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();

    }   
?>

然后让我们创建脚本，当点击建议时，它会将其数据放入相应的文本字段中。从jQuery 1.7开始，使用.on() .live()为deprecated：

$(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;

});

如何使用基于第一个文本框输入的数据填充多个文本框？

2 个答案: