在选择中搜索数据

Question

我有一个庞大的客户数据数据库，我需要找到一种更简单的方法来选择这些数据。我尝试使用此代码，但由于某种原因我无法“过滤”数据。感谢您的帮助。

function trocaOpcao(valor, objSel) {
    for (i=0; i < objSel.length; i++){
        qtd = valor.length;
        if (objSel.options[i].text.substring(0, qtd).toUpperCase() == valor.toUpperCase()) {
            objSel.selectedIndex = i;
            break;
        }
    }
}

<fieldset id="iLocal">
    <input type="text" name="nLocalizar" id="iLocalizar" placeholder="Digite o controle que deseja pesquisar" onkeyup="trocaOpcao(this.value, document.form.nId);">
</fieldset>
<fieldset class="Prop2">
    <legend class="legend">Localizar</legend>
    Localizar:
    <select name="nId" id= "iId" class="nNamesel" onchange="Alterar(this.value)">
        <option value="0" disabled selected>Selecione o Proprietário</option>
        <?php
            $result_nome="SELECT * FROM teste ORDER BY proprietario";
            $resultado=mysqli_query($conexao,$result_nome);
            while($row_resultado=mysqli_fetch_assoc($resultado)){ 
        ?>
        <option id="iOpt" value="<?php echo $row_resultado['id'];?>">
            <?php 
                echo utf8_encode( $row_resultado['id']." - ".$row_resultado['proprietario']." / ".$row_resultado['logradouro']) 
            ?>
        </option>
        <?php
            }
        ?>

    </select></br></br>
</fieldset>

我想在输入中输入 id 并在 select 中显示这些 id 和客户端数据，所以当我点击 select 时，我会很容易找到我想要的..

P.S = 当我尝试在不同的页面中执行此操作时，它运行良好

Answer 1

这是一种方法。我删除了与答案无关的 PHP 代码。

function trocaOpcao(valor, objName) {
    var objSel = document.querySelector('[name=' + objName + ']');
    for (i=0; i < objSel.length; i++){
        if ( objSel.options[i].text
               .toUpperCase()
               .indexOf(valor.toUpperCase()) != -1 ) {
            objSel.selectedIndex = i;
            break;
        }
    }
}

<form>
  <fieldset id="iLocal">
      <input type="text" name="nLocalizar" id="iLocalizar" placeholder="Digite o controle que deseja pesquisar" onkeyup="trocaOpcao(this.value, 'nId');">
  </fieldset>
  <fieldset class="Prop2">
      <legend class="legend">Localizar</legend>
      Localizar:
      <select name="nId" id="iId" class="nNamesel" onchange="">
         <option value="0" disabled selected>Selecione o Proprietário</option>
         <option id="iOpt" value="1">1-Fulano-local1</option>
         <option id="iOpt" value="2">2-Beltrano-local2</option>
         <option id="iOpt" value="3">3-Sicrano-local3</option>      </select>
     </br></br>
  </fieldset>
</form>

请理解，使用此解决方案，您可以在输入中输入任何您想要的内容。不仅仅是价值。示例：尝试输入：“腰带”。