如何仅使用JavaScript/Ajax通过匹配的下拉选项执行文本框搜索

我正在从事一个网络开发项目。我需要在文本框中输入银行名称等信息。在用户开始键入3个字母后，我需要显示以下所有匹配选项（不清楚如何显示）。在下面的选项中，用户可以单击任意一个选项，单击的文本应粘贴在同一文本框中。所有内容都应该是html、css、js或ajax

到目前为止，我创建了一个文本框和一个

ul

列表，其中没有

li

，默认情况下，这个有序列表是隐藏的。我为文本框创建了onkeyup事件。当用户开始键入银行名称时，如果文本长度为

=3

（因为banks关键字最小为3），我将使用ajax使用匹配数据填充

ul

，并取消隐藏它

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for a Bank" title="Type in a name">
<ul id="myUL" hidden onclick="selectBank()">

剧本是：

<script>
  function myFunction(){

    var inp = document.getElementById('myInput');
    var len = inp.value.length;

    if(len>=3){
      LoadBanks();
      $("#myUL").show();
    }else{
      $('#myUL').empty();
      $("#myUL").hide();
    }
  }

  function LoadBanks(){
    // for now the key is static. i will be updating it with the user input
    var payload = {"key":"SBI"}
    
    $.ajax({
      url:"url",
      type: "POST",
      data: JSON.stringify(payload),
      dataType: 'json',

      success: function (data){
        jsonObj = data.bankList;
        var list = document.getElementById("myUL");

        for (var i = 0; i < jsonObj.length; i++) {
          var bank = jsonObj[i].banka;
          var bankl = jsonObj[i].bankl;
          var t = document.createElement('li');
          t.innerHTML= bank+"-"+bankl;
          list.appendChild(t);
        }
      },

      error: function(data){
        console.log(data);
      }
    });
  }

函数myFunction（）{
var inp=document.getElementById（'myInput'）；
var len=inp.value.length；
如果（len>=3）{
装载库（）；
$（“#myUL”）.show（）；
}否则{
$（'#myUL'）.empty（）；
$（“#myUL”）.hide（）；
}
}
函数LoadBanks（）{
//现在密钥是静态的。我将用用户输入更新它
var有效负载={“键”：“SBI”}
$.ajax({
url:“url”，
类型：“POST”，
数据：JSON.stringify（有效载荷），
数据类型：“json”，
成功：功能（数据）{
jsonObj=data.bankList；
var list=document.getElementById（“myUL”）；
对于（var i=0；i

---

数据加载成功。但是我不知道如何获取从li的onclick事件中选择的项目的文本。

您可以在

li

上编写click事件，然后在该事件中使用

$（this）。text（）

这将为您提供来自li的文本，单击后将其添加到您的输入框中

演示代码：

//只是演示数据。。
风险值数据={
“银行名单”：[{
“banka”：“cdc”，
“银行”：“cdcde”
}, {
“banka”：“cdc1”，
“银行”：“cdcde1”
}, {
“banka”：“cdc2”，
“银行”：“cdcde2”
}]
}
函数myFunction（）{
var inp=document.getElementById（'myInput'）；
var len=inp.value.length；
如果（len>=3）{
装载库（）；
$（“#myUL”）.show（）；
}否则{
$（'#myUL'）.empty（）；
$（“#myUL”）.hide（）；
}
}
函数LoadBanks（）{
/*$.ajax({
url:“url”，
类型：“POST”，
数据：JSON.stringify（有效载荷），
数据类型：“json”，
成功：功能（数据）{*/
jsonObj=data.bankList；
var list=document.getElementById（“myUL”）；
document.getElementById（“myUL”）.innerHTML=“”
对于（var i=0；i

到目前为止，您尝试了什么？你的代码是什么？数据来自何处等。？问题中没有足够的信息以帮助您回答这个问题。您是否正在尝试实现类似jQuerys自动完成功能的功能？编辑得更清楚。我设法加载了数据。但是我不知道如何从项目列表中获取单击的元素。