我使用一个ajax调用来查询我的mysql数据库,以搜索用户列表。
这是html;
<input type="text" id="partnerName" name="partnerName" class="form-control" placeholder="Type to search partners....">
<div id="partnerList" style="background-color:#beb6ac;"></div>
这是我的函数。
$(document).ready(function() {
$('#busTradingName').keyup(function() {
var query = $(this).val();
if (query != '') {
$.ajax({
url: "search/empsearch.php",
method: "POST",
data: {
query: query
},
success: function(data) {
$('#empList').fadeIn();
$('#empList').html(data);
}
});
}
});
$(document).on('click', 'li', function() {
$('#busTradingName').val($(this).text());
$('#empList').fadeOut();
});
});
下面是查询:
if(isset($_POST["query"])){
$output = '';
$query = "SELECT busTradingName FROM organisation WHERE busTradingName LIKE '%".$_POST["query"]."%'";
$result = mysqli_query($connection, $query);
$output = '<ul class="list-unstyled">';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '<li>'.$row["busTradingName"].'</li>';
}
}
else
{
$output .= '<li>Not Found</li>';
}
$output .= '</ul>';
echo $output;
}
这个可以完美地工作。但是如果我想使用相同的函数,以相同的形式,我的其他输入字段也会更新(即使id不同,查询完全在不同的php文件中。例如:
这个HTML;
<input type="text" name="busTradingName" id="busTradingName" placeholder="Last employer's trading name">
<div id="empList"></div>
此函数;
$(document).ready(function() {
$('#partnerName').keyup(function() {
var query = $(this).val();
if (query != '') {
$.ajax({
url: "search/search.php",
method: "POST",
data: {
query: query
},
success: function(data) {
$('#partnerList').fadeIn();
$('#partnerList').html(data);
}
});
}
});
$(document).on('click', 'li', function() {
$('#partnerName').val($(this).text());
$('#partnerList').fadeOut();
});
});
使用此查询;
if(isset($_POST["query"])){
$output = '';
$query = "SELECT * FROM cards WHERE surname LIKE '%".$_POST["query"]."%'";
$result = mysqli_query($connection, $query);
$output = '<ul class="list-unstyled">';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '<li>'.$row["surname"].'</li>';
}
}
else
{
$output .= '<li>Not Found</li>';
}
$output .= '</ul>';
echo $output;
}
这将使用相同的数据更新两个输入字段。你知道为什么我的查询没有被传递给一个特定的输入,而是被填充到整个表单中吗?
发布于 2018-06-25 07:37:46
仔细观察,这两个事件处理程序都有一些共同之处:
<script type="text/javascript">
$(document).ready(function () {
// ...ajax for #partnerName...
$(document).on('click', 'li', function () {
$('#partnerName').val($(this).text());
$('#partnerList').fadeOut();
});
// ...ajax for #busTradingName...
$(document).on('click', 'li', function () {
$('#busTradingName').val($(this).text());
$('#empList').fadeOut();
});
});
</script>
例如,两者都连接到相同的元素(document
)。此外,在这两种情况下,每个click
事件都是在li
类型的元素上触发的。因此,从理论上讲,这两个分离的代码片段可以结合在一起,形成:
<script type="text/javascript">
$(document).ready(function () {
// ...
$(document).on('click', 'li', function () {
$('#partnerName').val($(this).text());
$('#partnerList').fadeOut();
$('#busTradingName').val($(this).text());
$('#empList').fadeOut();
});
});
</script>
这个“安排”更好地强调了问题。例如,所有输入都是同时更新的。
为了避免这种行为,您可以将每个事件处理程序附加到相应的“父”元素,而不再附加到document
。最终的代码将如下所示:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//********************************************
// Ops regarding the partner name.
//********************************************
$('#partnerName').keyup(function () {
var query = $(this).val();
if (query != '') {
$.ajax({
url: "search/search.php",
method: "POST",
data: {
query: query
},
success: function (data) {
$('#partnerList').fadeIn();
$('#partnerList').html(data);
}
});
}
});
$('#partnerList').on('click', 'li', function () {
$('#partnerName').val($(this).text());
$('#partnerList').fadeOut();
});
//********************************************
// Ops regarding the trading name.
//********************************************
$('#busTradingName').keyup(function () {
var query = $(this).val();
if (query != '') {
$.ajax({
url: "search/empsearch.php",
method: "POST",
data: {
query: query
},
success: function (data) {
$('#empList').fadeIn();
$('#empList').html(data);
}
});
}
});
$('#empList').on('click', 'li', function () {
$('#busTradingName').val($(this).text());
$('#empList').fadeOut();
});
});
</script>
</head>
<body>
<!--<form method="post">-->
<label>Partner name:</label>
<input type="text" id="partnerName" name="partnerName" placeholder="Search for partners...">
<div id="partnerList"></div>
<br/>
<label>Trading name:</label>
<input type="text" id="busTradingName" name="busTradingName" placeholder="Search for last employer's trading name...">
<div id="empList"></div>
<!--</form>-->
</body>
</html>
https://stackoverflow.com/questions/51014466
复制相似问题