javascript - 转换为文本框搜索而不是下拉搜索

Question

我一直在使用这个脚本从下拉选择选项中带回信息，我想使用相同的方法，但在文本框中，用户可以输入搜索，这可以吗？它将是某种搜索引擎。我想我可以弄清楚如何创建搜索引擎部分，我只需要先隐藏它以确保我可以返回正确的结果。

我的目标是允许用户在文本字段中输入他/她想要的特定 Logo ，并且返回的是该搜索的结果。他们正在数组中搜索 png 图像，并选择一个来完成表单。

function showSub(str) {
    var xmlhttp;
    if (str=="") {
      document.getElementById("txtSub").innerHTML="";
      return;
    }
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("txtSub").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","getSub.php?q="+encodeURIComponent(str),true);
    xmlhttp.send();
}

HTML

<tr>
  <td width='15%'><div align='right'><strong>Sub-Category</strong></div></td>
  <td width='70%'><div id="txtSub"></div></td>
</tr>

旁注:我见过一些搜索查询可以即时为您提供结果，也可以在按 Enter 键后为您提供结果。我当前使用的脚本是在 ajax 中，我相信它会在选择下拉列表后为您提供结果，是否可以对文本搜索框执行相同的操作？

编辑:另外，如果这个脚本是执行此操作的错误方法，并且有人有替代建议或已经执行此操作的脚本，我非常愿意接受其他想法。谢谢。

Answer 1

如果您想使用文本字段输入，您可以执行以下操作:

html

<input type="text" id="searchText" value="" />

javascript/jquery

$(document).on('change', '#searchText', function() {
    // Get the search text
    var searchText = $(this).val();
    // Make sure it isn't empty
    if (searchText.length > 0) {
        // Send the update request
        showSub(searchText);
    }
});