PHP-Ajax：使用下拉菜单进行实时搜索并在单击时分配值
[英]PHP-Ajax: live search with drop down and assign value onclick
问题描述
我正在使用 html 输入“搜索”实现实时搜索，结果应显示在其下方，以便用户可以选择正确的名称。 一旦客户选择名称，它会将所选名称的 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>
从 search.php 返回的数据
{"names":[{"name":" xxxxxx","id":3},{"name":"yyyy","id":6},{"name":"zzzz","id":5}]}
面临的问题： 1- resultDropdown.html(person) ：仅显示 json 上的最后一项
2- 如何在点击时分配 ID
2 个解决方案
解决方案1
0 2020-01-17 15:55:05
将 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');
})
解决方案2
0 已采纳 2020-01-17 16:28:07
这是完整的代码，如果有的话
<?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>
使用php-ajax更新另一个下拉菜单的更改下拉菜单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.