php - 基于用户输入的实时 MySQL 数据库搜索
问题描述
所以我最近创建了这个小脚本,当用户开始在某个框中输入时搜索我的客户数据库。
这使他们可以将一条记录与另一条记录联系起来,以便将来更容易。
但是,当他们正在寻找的客户出现时,他们必须单击该名称,一旦他们单击该名称,它将填充该框。
但是我需要能够识别他们点击了哪个客户,以便我可以将客户 ID 存储在数据库中以备将来使用。
到目前为止,我得到的脚本将显示 3 列,firstName
customerslastName
和ID
. 如何将 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 -->
解决方案
如果我理解正确(!?),那么您可以稍微修改生成的 HTML 以包括,例如,一个数据集属性data-cid
,您可以使用它稍后将 ajax 请求发送到后端,以便您可以存储 customerID。例如 - 不包括任何 Ajax 代码
将事件侦听器绑定到结果容器 - 侦听器将注册符合条件的元素的命中,即具有data-cid
属性的段落标记。代替警报只需发送一个 ajax 请求到任何 php 脚本将处理 customerID/details 上的点击事件。
下面的 HTML 片段是从 db 查找生成的 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>
推荐阅读
- amazon-cloudformation - CloudFormation:WAF 关联总是因内部故障而失败
- html - flexbox 中的 Safari 网格会产生高度溢出
- spring - Jpa 在多个查询期间不保存或更新表
- r - 订购从 r 中的因子变量创建的表
- r - 随机森林中的折叠性能
- python - 存储“dask.array.map_blocks”输出时限制内存占用
- django - Django,在管理面板错误中添加本地主机,但在 db.sqlite3 上手动工作
- r - 如何在R中找到数值变量和因子变量之间的相关性?
- python - 避免在 python 正则表达式中重复删除
- javascript - if then else条件在json模式中