Question

因此，我最近创建了这个小脚本，当用户开始在特定框中键入内容时，该脚本将搜索我的客户数据库。

这使他们可以将一个记录与另一个记录绑定在一起，以使将来更容易使用。

但是，当他们要查找的客户出现时，他们必须单击名称，一旦单击该名称，它将填充该框。

但是，我需要能够确定他们单击了哪个客户，以便将来将客户ID存储在数据库中。

到目前为止，我拥有的脚本将显示3列，即客户firstName，lastName和ID。如何将ID与firstName和lastName分开以将其存储在数据库中？

这是我的PHP搜索代码...

try {
$customerConn = new PDO('mysql:host=DATABASE HOST NAME HERE;dbname=DATABASE NAME HERE;charset=utf8', 'USERNAME', 'PASSWORD');  
// echo 'client version: ', $conn->getAttribute(PDO::ATTR_CLIENT_VERSION), "\n";
// echo 'server version: ', $conn->getAttribute(PDO::ATTR_SERVER_VERSION), "\n";
$customerConn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$customerConn->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
}
catch(PDOException $err) {
var_dump($err->getMessage());
die('...');
}

// Attempt search query execution
try{
if(isset($_REQUEST["term"])){
    // create prepared statement
    $sql = "SELECT * FROM customerLeads WHERE lastName LIKE :term";
    $stmt = $customerConn->prepare($sql);
    $term = $_REQUEST["term"] . '%';
    // bind parameters to statement
    $stmt->bindParam(":term", $term);
    // execute the prepared statement
    $stmt->execute();
    if($stmt->rowCount() > 0){
        while($row = $stmt->fetch()){
            echo "<p>".$row['firstName']." ".$row["lastName"]." - ".$row['customerID']."</p>";
        }
    } else{
        echo "<p>No matches found</p>";
    }
}  
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}

// Close statement
unset($stmt);

// Close connection
unset($customerConn);

为了安全起见，我还替换了数据库详细信息！

修改这是我在页面中使用的JavaScript

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.search-box input[type="text"]').on("keyup input", function(){
            /* Get input value on change */
            var inputVal = $(this).val();
            var resultDropdown = $(this).siblings(".result");
            if(inputVal.length){
                $.get("../../scripts/customerSearch.php", {term: inputVal}).done(function(data){
                    // Display the returned data in browser
                    resultDropdown.html(data);
                });
            } else{
                resultDropdown.empty();
            }
        });

        // Set search input value on click of result item
        $(document).on("click", ".result p", function(){
            $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
            $(this).parent(".result").empty();
        });
    });
    </script>

这是相关的HTML

<div class="form-group search-box">
 <label>Customer Name</label>
 <input type="text" placeholder="Search Customer" autocomplete="off" name="customerName">
 <div class="result"></div>
</div> <!-- end .form-group -->

Answer 1

如果我正确理解（！？），那么您可以稍微修改生成的HTML，以包含例如data-cid之类的数据集属性，您可以将其稍后用于向后端发送ajax请求，以便您可以存储customerID。例如-不包含任何Ajax代码

将事件侦听器绑定到结果容器-侦听器将在符合具有data-cid属性的段落标记条件的元素上注册匹配。代替警报，只需将ajax请求发送到将处理customerID / details上的click事件的任何php脚本。

下面的HTML代码段是对数据库查询中生成的HTML的仿真，该查询正在填充到div.result容器中

<div class='form-group'>
    <div class='result'>
        <p data-cid=23>lux interior - 23</p>
        <p data-cid=44>marilyn monroe - 44</p>
        <p data-cid=27>sid vicious - 27</p>
    </div>
</div>

<script>
    document.querySelector('.form-group > div.result').addEventListener('click',e=>{
        e.preventDefault();
        if( e.target!=e.currentTarget && e.target.tagName.toLowerCase()=='p' && e.target.hasAttribute('data-cid') ){
            alert( 'send ajax request to log customerID='+e.target.dataset.cid )
        }
    })
</script>

包含基本Ajax请求的修改版本

<div class='form-group search-box'>
    <label>Customer Name</label>
    <input type='text' placeholder='Search Customer' autocomplete='off' name='customerName'>
    <div class='result'>
        <p data-cid=23>bobby davro - 23</p>
        <p data-cid=44>marilyn monroe - 44</p>
        <p data-cid=27>sid vicious - 27</p>
    </div>
</div>


<script src='//code.jquery.com/jquery-latest.js'></script>
<script>

    let container=document.querySelector('.form-group');
    let results=container.querySelector('div.result');
    let text=container.querySelector( 'input[ name="customerName" ][ type="text" ]' );

    results.addEventListener('click',e=>{
        e.preventDefault();     
        if( e.target!=e.currentTarget && e.target.tagName.toLowerCase()=='p' && e.target.hasAttribute('data-cid') ){
            $.ajax({
                url:location.href,
                data:{cid:e.target.dataset.cid},
                type:'POST',
                error:e=>{ alert('Error: '+e) },
                success:r=>{ alert( 'logged to db: '+r ) }
            });
            text.value=e.target.innerText
        }
    })
</script>

根据用户输入进行实时MySQL数据库搜索

1 个答案: