Convert to Text Box search instead of drop down

Question

I've been using this script to bring back information from a drop down select option, i want to use this same method but in a text box, where the user can input a search instead, is this possible to do? It would be a search engine of sorts. I think i can figure out how to create the search engine part, I just need to covert this first to make sure i can return back a proper result.

My objective is to Allow the user to type in a text field a specific logo he/she wants, and the return is the results of that search. They are searching png images in an array and will select one to complete the form.

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>

Side note: I've seen search queries that give you results on the fly and results that give you results after pressing enter. My current script that uses this is in ajax I believe and gives you the results after the drop down is selected, would it possible to do the same with a text search box?

Edit: Also, if this script is the wrong method to do this, and someone has an alternate suggestion or a script that already does this, i'm very open to other ideas. thanks.

Answer 1

If you want to use a text field input you could do something like:

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);
    }
});