title: How to pass a search term back into an ajax-generated div?
body: <p>Entering text to a textbox is firing an ajaxRequest to look up the Db for results. Those results should be outputted in a list, beneath the textbox and when one of the possible matches is clicked upon, its value is moved into the textbox for submission via the submit button. </p>
  
  <p>The submit button then fires to another ajaxRequest/output so that the data for the selected 'John' will show in the same ajax div. (The same ajax div as the textbox form was in). That part is a separate issue that I shall work on but for now, I need to get the possible matches to display beneath the textbox into which the search characters were entered. </p>
  
  <p>When positioned in the php output of a script, the process works perfectly.</p>
  
  <p>I now need it to work in an ajax-generated div so I am using a listener.
  However, passing data back and forth is confusing me. </p>
  
  <p>So; from the beginning....I click a form submit button (visually this is a function button in a webpage - 'Lookup by name').</p>
  
  <p>That successfully generates the textbox and submit button for looking up customer names eg 'John' and it is displayed in a div with the id 'ajaxDiv'. (an ajax div within the page output where all ajax-generated output will display).</p>
  
  <p>As I enter 'joh' the event listener (keyup) records the keys pressed (eg 'Joh') and this outputs correctly to JS console.log();</p>
  
  <p>However, I don't seem to be able to get the list of six people whose name begins with 'Joh' to display beneath the textbox. Nothing shows beneath the textbox and I expect it is because I haven't passed the search_param back to that ajaxDiv.  </p>
  
  <p>If this code is within the normal php flow the scripting works so I need to understand the ajax part. ( that part which should provide the listing output beneath the textbox). </p>
  
  <p>Below is the code as it works in the normal php output.  It is also the code that appears in the ajax-generated div in my page.</p>
  
  <p></p>
  
  <pre><code>&lt;form style='float:left;padding:0' action="url-of-a-page" method='get'&gt;
  &lt;input type='hidden' name='action' value="part_number_search" /&gt;
  &lt;table style="padding:0;position:absolute;z-index:2000;background:#eee;overflow:visible"&gt;
  &lt;tr&gt;
      &lt;td&gt;
  
  &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  function lookup4(inputString,id,where)
  {
  
      if(inputString.length &lt; 2) // if the input box has less than 4 characters do not show
      {
      // Hide the suggestion box.
      $('#suggestions'+id).hide();
      } else {
      $.get("https://myURL/ajax/retailers_search_catalogue_query.php?x=62595&amp;order_id=", {box: ""+where+"", input: ""+inputString+""}, function(data){
      if(data.length &gt;0) {
              theheight = document.getElementById(where).offsetHeight + 2 + 'px';
              leftval = document.getElementById(where).offsetLeft + 'px';
              $('#suggestions'+id).css({'top' : theheight, 'left' : leftval});
              $('#suggestions'+id).show();
              $('#autoSuggestionsList'+id).html(data);
          }
          else
          {
              $('#suggestions'+id).hide();    
          }
          });
      }
  } // lookup
  
  function fill(thisValue,where,id) {
      $(where).val(thisValue);
      $('#suggestions'+id).hide();
  }
  // ]]&gt;
  &lt;/script&gt;
  
  
  
  
  
  &lt;input type="text" style='width: 185px' name="search_param" id="search_param" placeholder="Enter Part No. or Name" onkeyup="lookup4(this.value,4,'search_param');" /&gt;
  &lt;div class="suggestionsBox" id="suggestions4" style="display: none;"&gt;
      &lt;div class="suggestionList" id="autoSuggestionsList4" style="position:absolute;z-index:2000;padding: 10px 0 10px 5px;background:inherit;color:#717074;left:0;white-space:nowrap;list-style: none;"&gt; 
      &lt;/div&gt;
  &lt;/div&gt; 
  
  
  &lt;script language='javascript' type='text/javascript'&gt;
  function SetFocus()
  {
      // safety check, make sure its a post 1999 browser
      if (!document.getElementById)
      {
      return;
      }
  
      var txtMyInputBoxElement = document.getElementById("search_param");
  
      if (txtMyInputBoxElement != null)
      {
      txtMyInputBoxElement.focus();
      }
  }
  SetFocus();
  &lt;/script&gt;
  
  &lt;/td&gt;
  &lt;td style="vertical-align:top;"&gt;
    &lt;input type='hidden' name='business_id' value="62595" /&gt;
    &lt;input type='submit' value='Search Retail Catalogue'/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the listener in the main script that outputs the ajax div.</p>
  
  <pre><code>// LISTENER FOR ONKEYUP
  document.getElementById("ajaxDiv").addEventListener("keyup", 
  function(e) 
  {
  var form_id = e.target.id;
  var search_term = e.target.value;
  //e.preventDefault();
  / console.log( 'order_id   ', order_id);
  
      if ( form_id === 'search_param')
      {
  console.log( 'form_id1    ' + form_id);
  console.log( 'search_term   '  + search_term);
      // send the data to the function that uses the data to do something.
      window.onload = newAjaxFunction( form_id, search_term );
      }   
  
  });
  </code></pre>
  
  <p>I need the results to be placed beneath the textbox.
  Having thought some more as I wrote this, I THINK I need to pass the search_param back to the ajaxDiv in the function immediately above here.  Or perhaps it should be passed back to the ajax code that submits to the query?  </p>
  
  <p>How should that search_param be passed back to the ajax lookup code within the ajax div (without reloading it and losing the previously entered characters - 'j', 'o', 'h' ??</p>
  
  <p>Bazz</p>