得到的选择.值从ajax生成的选项

Getting options.value from ajax generated options

本文关键字：ajax 选项 值从 选择      更新时间：2023-09-26

我的想法是，我有这个选择框，当我在输入文本中键入时，它会使用给定的通配符在数据库中搜索给定的公司。

HTML 

<span id='errorCompany'></span>
<input type='text' name='search_query_bedrijf' id='search_query_bedrijf' onkeypress='checkForm('"query_bedrijf'")' placeholder='Search companies'>
<select id='bedrijf' name='bedrijf'>
    PHP code is inside here to get all the data from the database
</select>
Javascript 

function checkForm(type){
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("bedrijf").innerHTML = xmlhttp.responseText;
        }
    }
    var wildcard = document.getElementById("search_query_bedrijf").value;
    xmlhttp.open("GET","getBedrijven.php?wildcard=" + wildcard,true);
    xmlhttp.send();
    if(document.getElementById("bedrijf").options[0].value == "NoData"){
        document.getElementById("errorCompany").innerHTML = "Not a valid company.";
    }else{
        document.getElementById("errorCompany").innerHTML = "";
    }
}
AJAX 

<?php
include("include/connect.php");
$wildcard = $_GET["wildcard"];
if($wildcard == ""){
$sqlSelectWildcardLeverancier = "SELECT * FROM companies";
}else{
$sqlSelectWildcardLeverancier = "SELECT * FROM companies WHERE company LIKE      '%".$wildcard."%'";
}
if(!$res = $mysqli->query($sqlSelectWildcardLeverancier)){
    trigger_error('Fout bij query: '.$mysqli->error);
}else{
    while($row = $res->fetch_assoc()){
        $companyID = $row["companyID"];
        echo "<option value='$companyID'>".$row['company']."</option>";
    }
}
$number_bedrijven = $res->num_rows;
if($number_bedrijven == 0){
    echo "<option value='NoData' selected>No data found for this query</option>";
}
?>

现在这一切都像我应该的那样(它从通配符中获取数据等)当我输入像"WallmartQ"这样的东西时，它会给我"没有找到这个查询的数据"，但我必须输入另一个字母"WallmartQE"，所以它会在我的span中给我错误信息这里有一个gif来更好地解释它:https://i.stack.imgur.com/4BQxh.gif

只需在异步回调中删除options[0].value == "NoData"检查-否则它将在响应到达之前执行，并将对"旧"数据进行操作。有关详细信息，请参见如何从异步调用返回响应? 

function checkForm(type) {
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("bedrijf").innerHTML = xmlhttp.responseText;
            if (document.getElementById("bedrijf").options[0].value == "NoData") {
                document.getElementById("errorCompany").innerHTML = "Not a valid company.";
            } else {
                document.getElementById("errorCompany").innerHTML = "";
            }
        }
    }
    var wildcard = document.getElementById("search_query_bedrijf").value;
    xmlhttp.open("GET", "getBedrijven.php?wildcard=" + wildcard, true);
    xmlhttp.send();   
}
相关文章：