PHP-Ajax：实时搜索，下拉列表并分配值
我正在使用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
开心每一天11112回答
-
慕妹3242003
将 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
这是完整的代码，如果一些<?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>
随时随地看视频慕课网APP
PHP