因此,我最近创建了这个小脚本,该脚本在用户开始在某个框中键入时搜索我的客户数据库。
这使他们可以将记录与另一个记录联系起来,以使其将来更容易。
但是,当他们寻找客户时,似乎必须单击名称,一旦单击名称,它将填充框。
但是,我需要能够确定他们点击的哪个客户,以便我可以将客户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 -->
如果我正确理解(!?),那么您可以稍微修改生成的HTML以包括一个数据集属性,例如 data-cid
后端,以便您可以存储客户ID。例如 - 不包括任何AJAX代码
将事件侦听器绑定到结果容器 - 侦听器将在符合具有data-cid
属性的段落标签的元素上注册命中。代替警报,只需将AJAX请求发送给PHP脚本将在CustomerID/详细信息上处理单击事件的任何内容。
下面的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>