我正在使用html输入“搜索”实现实时搜索，结果应显示在其下方，以便用户可以选择正确的名称。一旦客户选择名称，它将所选名称的ID分配给其他隐藏的输入“id”。以下是我的代码详细信息：索引.php<?php?><!DOCTYPE html><html><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
2 回答
慕妹3242003
TA贡献1824条经验 获得超6个赞
将 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');
})
慕桂英3389331
TA贡献2036条经验 获得超8个赞
这是完整的代码，如果一些
<?php
?>
<!DOCTYPE html>
<html>
<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>
- 2 回答
- 0 关注
- 147 浏览
添加回答
举报
0/150
提交
取消