gpt4 book ai didi

javascript - AJAX 自动建议系统显示重复项?

转载 作者:太空宇宙 更新时间:2023-11-03 22:14:29 25 4
gpt4 key购买 nike

我有一个搜索栏可以搜索一些标题。我为它做了一个简单的自动完成系统。我制作了一个带有一些自动完成功能的简单 MySQL 表。这是它。

table

然后我使用 AJAX 检索数据。但是这个自动完成系统显示重复项。它的代码在图像之后给出。 (标题google有重复的条目,但表中只有一个)。

enter image description here

function suggest(val){
if(val.length == 0){
document.getElementById("suggestions").innerHTML = '';
}
else{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200){
var res = this.response;
if(res.length != 0){
document.getElementById("suggestions").innerHTML = res;
var spans = document.getElementById("suggestions").getElementsByTagName('span');
var span_values = [];
for(span of spans){
if(span_values.includes(span.innerHTML)){
console.log(span.innerHTML);
span.nextSibling.remove();
span.remove();
}
else{
console.log(span.innerHTML);
span_values.push(span.innerHTML);
}
}
}
else{
document.getElementById("suggestions").innerHTML = '';
}
}
}
xhttp.open('GET', '../../search/apis/suggestions/?query=' + val, true);
xhttp.send();
}
}
#omnibox-container-main-div{
margin:40px 30px 0 30px;
text-align: center;
}
#omnibox-container-div{
display: inline-flex;
flex-flow: row wrap;
align-items: center;
}
#omnibox-input{
display: inline-block;
width: 80%;
padding:8px;
border:none;
border-left:2px solid rgb(0, 97, 189);
border-right:none;
border-top:2px solid rgb(0, 97, 189);
border-bottom:2px solid rgb(0, 97, 189);
font-family: 'regular';
font-size:15px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
#omnibox-input::placeholder{
font-family: 'light';
color:rgb(134, 134, 134);
}
#omnibox-submit-btn{
display: inline-block;
width:70px;
color:rgb(126, 126, 126);
font-family: 'light';
font-size: 15px;
padding:8px;
border: none;
background-color: white;
border-top:2px solid rgb(0, 97, 189);
border-bottom:2px solid rgb(0, 97, 189);
border-right:2px solid rgb(0, 97, 189);
border-left:none;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
#omnibox-submit-btn:hover{
background-color: rgb(1, 85, 163);
color:white;
cursor: pointer;
}
#close-notice-span{
text-decoration: none;
color:rgb(78, 78, 78);
font-family: 'bold';
position: absolute;
right:10px;;
cursor: pointer;
}
#suggestions{
margin-top:10px;
font-family: 'medium';
z-index: 20;
}
.suggestions-a{
text-decoration: none;
margin:5px;
color:rgb(148, 148, 148);
font-size: 15px;
padding-left:8px;
padding-right:8px;
cursor: pointer;
}
.suggestions-a:hover{
background-color: rgba(21, 122, 255, 0.6);
color:white;
border-radius: 50px;
}
#sug-wrapper{
display:none;
margin-left:calc((100vw - 470px) / 2);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-right:calc((100vw - 470px) / 2);
padding-right:15px;
padding-left: 15px;
margin-top:-10px;
border-left:2px solid rgb(0, 97, 189);
border-right:2px solid rgb(0, 97, 189);
border-bottom:2px solid rgb(0, 97, 189);
box-shadow: 2px 2px 2px 2px rgb(167, 167, 167);
height:200px;
max-height: 200px;
overflow: auto;
}
<div id="omnibox-container-main-div">
<div id="omnibox-container-div">
<input id="omnibox-input" type="text" value = "" placeholder="Type here..." oninput="suggest(this.value)" autocomplete="off"/><button id="omnibox-submit-btn" onclick="search_query()">Search</button>
</div>
</div>
<div id="sug-wrapper">
<div id="suggestions">

</div>
</div>

服务器端 PHP 代码。

<?php
if(isset($_GET['query'])){
$q = strtolower($_GET['query']);
if($q != '' or $q != null){
$con = mysqli_connect('localhost', 'root', '', 'search');
$sql = "SELECT `query` FROM `suggestions` WHERE `query` LIKE '%".$q."%'";
$res = mysqli_query($con, $sql);
if(mysqli_num_rows($res) > 0){
$matched = [];
$temp = [];
while($row = mysqli_fetch_assoc($res)){
$query = strtolower($row['query']);
array_push($temp, $query);
}
array_unique($temp);
$matched = preg_grep("/^".$q.".*?/", $temp);
array_unique($matched);
array_splice($matched, 6, count($matched) - 6);
foreach($matched as $match){
$mes = "<span class='suggestions-a' onmouseleave='selected=false;' onmouseenter='selected=true;' onclick='change_omni(\"".$match."\")'>".$match."</span><br/>";
echo $mes;
}
}
mysqli_close($con);
}
}
?>

我不明白为什么它显示重复值。我不知道为什么。我尝试了很多东西,

  • array_unique() 在 php 代码中
  • 检查并删除 javascript 中重复的 span 标签

与此问题相关的所有代码都贴在上面。请告诉我这是为什么。

最佳答案

您调用 array_unique 的原因不起作用的是 array_unique 返回 一组唯一值;它不影响输入数组。这样的事情会起作用:

$matched = array_unique($matched);

然而,处理查询中的重复项更容易,只需添加 DISTINCT 关键字:

$sql = "SELECT DISTINCT `query` FROM `suggestions` WHERE `query` LIKE '%".$q."%'";

关于javascript - AJAX 自动建议系统显示重复项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57542389/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com