我是php java脚本和html的新手很抱歉,如果这看起来很草率。但是我一直在线阅读并设法将sql db中的实时搜索功能整合在一起。它使用溢出来填充div标签以滚动搜索结果,搜索结果是单独的div标签。我希望能够点击div提交表单并将$ rmaNumber的变量带到$ _POST,以便我可以使用它。
这是实时搜索功能。当我点击div时,它将rmaNumber放入rmaSearch输入标签,这很棒,但我在想是否使用了onclick =" document.rmaSearchForm.submit()"在div标签上,它会将其传递给表单动作。
$(function(){
$(".search").keyup(function(){
var rmaSearch = $(this).val();
var dataString ='search='+ rmaSearch;
if(rmaSearch!=''){
$.ajax({
type: "POST",
url: "searchResults.php",
data: dataString,
cache: false,
success:function(html){
$("#result").html(html).show();
}
});
}return false;
});
$(".show").live("click", function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#rmaSearch').val(decoded);
});
$(document).live("click", function(e){
var $clicked = $(e.target);
if(! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#rmaSearch').click(function(){
$("#result").fadeIn();
});
});
</script>
这是我的HTML。它位于上面的jquery脚本之下。
<body>
<form id="rmaSearchForm" name="rmaSearchForm" method="post" action="viewResultsForm.php">
<div class="searchDiv">
<p> RMA Search<br /></p>
<input type="text" class="search" id="rmaSearch" name="rmaSearch" placeholder="Enter RMA Number" autocomplete="off" />
<div id="result"></div>
</div>
</form>
</body>
这是在jquery脚本中找到的动态搜索searchResults.php。
if(strlen($_POST['search'])>=1){
$q = mysqli_real_escape_string($con, $_POST['search']);
$sqlResults=mysqli_query($con, "SELECT * FROM customer WHERE rmaNumber LIKE '%$q%' ORDER BY rmaNumber");
while($row=mysqli_fetch_array($sqlResults)){
$rmaNumber=$row['rmaNumber'];
$b_rmaNumber='<strong>'.$q.'</strong>';
$f_rmaNumber=str_ireplace($q, $b_rmaNumber, $rmaNumber);
?>
<div onclick="document.rmaSearchForm.submit()" class="show" align="left">
RMA# <span class="name"><?php echo $f_rmaNumber; ?></span><br />
</div>
<?php
}
如果有人有更好的方法,我很乐意接受建议。就像我说我刚开始学习PHP,jquery,html / css和mysql在过去的6个月里所以我知道我的代码不是应该的那么好但是我还在学习。如果需要更多信息,请多询问是否愿意告诉我更多信息。
答案 0 :(得分:0)
这样做:
$("#rmaSearchForm").on("click", ".show", function() {
var name = $(this).find(".name").text();
$("#rmaSearch").val(name);
$("#rmaSearchForm").submit();
});
带有选择器参数的 .on()
将事件委托执行到动态添加的元素,例如.live()
。无需调用.html()
,然后从中创建新的jQuery对象,然后调用.text()
- 您可以直接在DOM元素上调用.text()
。然后只需更新输入字段并提交表单。
您可能还想查看使用jQuery UI Autocomplete,因为这似乎基本上就是您在此处实施的内容。