我正在使用html输入"search"实现实时搜索，结果应显示在其下方，以便用户可以选择正确的名称。 一旦客户选择名称，它将所选名称的ID分配给其他隐藏的输入"ID"。 以下是我的代码详细信息：
索引.php
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#search").keyup(function(){
var txt = $(this).val();
var resultDropdown = $(this).siblings(".result");
var personname = "";
var personID = "";
if (txt !='')
{
$.ajax
(
{
type:"post", //submit method
url: "search.php", //url to sumitted data To
data: {name : txt}, //Data to be submitted
cache: false,
dataType: 'json',
//action on successful post request
success: function(data)
{
//process JSON
$.each(data.names, function(idx, name){
var person = "<p>" + name.name +"</p>";
resultDropdown.html(person);
});
},
}
)
}
else
{
resultDropdown.empty();
}
});
// Set search input value on click of result item
});
</script>
</head>
<body>
<form method="post" action="result.php">
<div class="search-box">
<input type="text" id="search" autocomplete="off" name="spousename" placeholder="search spouse" />
<input type="hidden" id="id" autocomplete="off" name="spouseid" placeholder="search spouse" />
<input class="w3-button w3-block w3-green w3-section w3-padding" type="submit" name="access"><b>Login</b></button>
<div class="result"></div>
</div>
</form>
</body>
</html>
从搜索返回数据.php
{"names":[{"name":" xxxxxx","id":3},{"name":"yyyy","id":6},{"name":"zzzz","id":5}]}
我面临的问题： 1-结果下拉列表.html(人(：仅在json上显示最后一项
2-如何在单击时分配ID
将html 连接到变量，然后在循环后显示它
var resultDropdown = $(".result");
success: function(data)
{
var person = "";
//process JSON
$.each(data.names, function(idx, name){
person += '<p class="name" data-id="'+ name.id +'">' + name.name +'</p>';
});
resultDropdown.html(person);
}
// Get the id of the clicked person
$(document).on('click', '.name', function(){
var id = $(this).attr('data-id');
})
这是完整的代码，如果有些
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#search").keyup(function(){
var txt = $(this).val();
var resultDropdown = $(".result");
var person = "";
if (txt !='')
{
$.ajax
(
{
type:"post", //submit method
url: "search.php", //url to sumitted data To
data: {name : txt}, //Data to be submitted
cache: false,
dataType: 'json',
//action on successful post request
success: function(data)
{
//process JSON
$.each(data.names, function(idx, name){
person += '<p data-id="'+ name.id +'">' + name.name +'</p>';
});
resultDropdown.html(person);
},
}
)
}
else
{
resultDropdown.empty();
}
});
// Get the id of the clicked person
$(document).on("click", ".result p", function(){
//assign the value of person name to search input
$(this).parents(".search-box").find('#search').val($(this).text());
//get the id
var id = $(this).attr('data-id');
//set input id "id" value
$("#id").val(id);
//clear search data
$(this).parent(".result").empty();
})
});
</script>
</head>
<body>
<form method="post" action="result.php">
<div class="search-box">
<input type="text" id="search" autocomplete="off" name="spousename" placeholder="search spouse" />
<input type="hidden" id="id" autocomplete="off" name="spouseid" placeholder="search spouse" />
<input class="w3-button w3-block w3-green w3-section w3-padding" type="submit" name="access"><b>Submit</b></button>
<div class="result"></div>
</div>
</form>
</body>
</html>