Method not getting the inputted string?

yoursurrogategod · August 6, 2012

Hi. I have a weird problem. If you go to the input type text into the searchText, the method searchCategory gets called _only_ when the focus is outside of the textbox. Why? I'd like the user to type and have the results displayed as the text gets entered.

<!-- A small search. -->

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        color:blue;
      }
      span {
        color:red;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js">
    </script>
  </head>
  <body>
    <form>
      <h1>Medical Abbreviations</h1>
      <table border="0" cellpadding="0" cellspacing="2">
        <tr>
          <td>
            <input type="radio" name="category" value="normal"
                   id="normalRadio" onclick="searchCategory();"
                   checked>
          </td>
          <td colspan="2">
            <label for="normalRadio">Search:</label>
            <input type="text" size="18" name="searchText"
                   id="searchText" onchange="searchCategory();">
          </td>
        </tr>
        <tr>
          <td>
            <input type="radio" name="category" value="symbols"
                   id="symbolsRadio"
                   onclick="setCategory('symbols');">
          </td>
          <td colspan="2">
            <label for="symbolsRadio">All Symbols</label>
          </td>
        </tr>
        <tr>
          <td>
            <input type="radio" name="category" value="muscleTestingGrades"
                   id="muscleTestingGradesRadio"
                   onclick="setCategory('muscleTestingGrades');">
          </td>
          <td colspan="2">
            <label for="muscleTestingGradesRadio">Muscle Testing Grades</label>
          </td>
        </tr>
        <tr>
          <td>
            <input type="radio" name="category" value="discouraged"
                   id="discouragedRadio"
                   onclick="setCategory('discouraged');"
                   onchange="setCategory('discouraged');">
          </td>
          <td colspan="2">
            <label for="discouragedRadio">Discouraged</label>
          </td>
        </tr>
        <tr>
          <td>
            <input type="radio" name="category" value="doNotUse"
                   id="doNotUseRadio"
                   onclick="setCategory('doNotUse');"
                   onchange="setCategory('doNotUse');">
          </td>
          <td colspan="2">
            <label for="doNotUseRadio">Do Not Use</label>
          </td>
        </tr>
      </table>
      <div class="browseLink">
        <p><a href="2012.htm">Browse 2012 Abbreviations</a></p>
        <p>If you would like to add an<br>
           abbreviation or make a correction,<br>
           please fill out a ticket with this<br>
           URL in the description and it will<br>
           be forwarded to the correct<br>
           affiliate HIS manager for action.</p>
      </div>
    </form>
    <div id="SearchResultsArea">
    </div>
    <script>
      function makeStructFactory(names)
      {
        var names = names.split(' ');
        var count = names.length;

        function constructor()
        {
          for(var i = 0; i < count; i++)
          {
            this[names[i]] = arguments[i];
          }
        }

        return constructor;
      }

      var Item = makeStructFactory("ACRONYM VALUE");

      var abbreviationsNormal =
        new Array(
          new Item('A Fib', 'Atrial fibrillation'),
          new Item('A&O', 'Alert & oriented'),
          new Item('A&Ox3', 'Alert & oriented to time/place/person'),
          new Item('A&Ox4', 'Alert & oriented to time/place/person/date'),
          new Item('A&P', 'Anterior and posterior'),
          new Item('A/C', 'Assist/control'),
          new Item('A/G ratio', 'Albumin/globulin ratio'),
          new Item('A/O', 'Add on'),
          new Item('A/O', 'As ordered'),
          new Item('A/P', 'Anteroposterior (x-ray)'),
          new Item('A<sub>2</sub>', 'Aortic second sound'),
          new Item('AA', 'Amino acids'),
          new Item('AAA', 'Abdominal aortic aneurysm'),
          new Item('AAA', 'Axillo-axillary axis'),
          new Item('AAROM', 'Activate assisted range of motion'),
          new Item('AB', 'Abdomen'),
          new Item('AB', 'Antibody'),
          new Item('ABD', 'Abduction'),
          new Item('ABD', 'Abdomen'),
          new Item('ABG', 'Arterial blood gases'),
          new Item('ABNL', 'Abnormal'),
          new Item('ABO', 'A system of classifying blood groups'),
          new Item('ABR', 'Auditory brainstem response (testing)'),
          new Item('ABS', 'Abscess'),
          new Item('ABX', 'Antibiotics'));

      function searchCategory()
      {
        var searchText = document.getElementById('searchText').value;

        if(searchText.length <= 0)
        {
          return;
        }

        var HTMLToOutput = '<table>';
        for(var i = 0; i < abbreviationsNormal.length; i++)
        {
          var searchString =
            abbreviationsNormal[i].ACRONYMS + ' ' +
            abbreviationsNormal[i].VALUE;

          if(searchString.search(searchText) != -1)
          {
            HTMLToOutput += '<tr>';

            HTMLToOutput += '<td>';
            HTMLToOutput += abbreviationsNormal[i].ACRONYMS;
            HTMLToOutput += '</td>';
            HTMLToOutput += '<td>';
            HTMLToOutput += abbreviationsNormal[i].VALUE;
            HTMLToOutput += '</td>';

            HTMLToOutput += '</tr>';
          }
        }
        HTMLToOutput += '</table>';

        if(HTMLToOutput.length > 20)
        {
          document.getElementById('SearchResultsArea').innerHTML = HTMLToOutput;
        }
        else
        {
          document.getElementById('SearchResultsArea').innerHTML =
            '<p>No results matching such string were found.</p>';
        }
      }
    </script>
  </body>
</html>

.josh · August 6, 2012

onchange gets called after focus of the input field is lost (you focus on another form field or click on another part of the site, etc..). You need to call your function in the onkeydown, onkeypress or onkeyup attrib instead

yoursurrogategod · August 13, 2012

onchange gets called after focus of the input field is lost (you focus on another form field or click on another part of the site, etc..). You need to call your function in the onkeydown, onkeypress or onkeyup attrib instead

One problem. When I enter the character "a", nothing happens. When I enter the character "b", all of the values that match the string "a" are displayed. Now, when I delete "b", all of the values that match "ab" are displayed. What the heck? It's as if the search is run on the string that's entered prior to the next character that's typed in. That's what happens for onkeydown and onkeypress.

However, onkeyup works like a charm.

Christian F. · August 13, 2012

Sounds like onkeypress and onkeydown is fired before the character is added to the field, while onkeyup is (naturally enough) fired afterwards.

I'd use the latter one in any case, to ensure that the user has completed his/her input; Repeating characters and all.

Sign In

Method not getting the inputted string?

Recommended Posts

yoursurrogategod

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

yoursurrogategod

Link to comment

Share on other sites

Christian F.

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information