Как передать поисковый термин обратно в сгенерированный ajax div?

Question

При вводе текста в текстовое поле запускается ajaxRequest для поиска в БД результатов. Эти результаты должны быть выведены в виде списка под текстовым полем, и при нажатии на одно из возможных совпадений его значение перемещается в текстовое поле для отправки с помощью кнопки отправки.

Затем кнопка отправки запускается в другой ajaxRequest / output, так что данные для выбранного «Джона» будут отображаться в том же div ajax. (Тот же Ajax DIV, что и в текстовом поле). Эта часть - отдельная проблема, над которой я буду работать, но сейчас мне нужно получить возможные совпадения для отображения под текстовым полем, в которое были введены символы поиска.

При позиционировании в выводе php скрипта процесс работает отлично.

Теперь мне нужно, чтобы он работал в сгенерированном ajax div, поэтому я использую слушатель. Однако передача данных туда и обратно сбивает меня с толку.

Итак, с самого начала .... Я нажимаю кнопку отправки формы (визуально это функциональная кнопка на веб-странице - «Поиск по имени»).

Это успешно генерирует текстовое поле и кнопку отправки для поиска имен клиентов, например 'John', и отображается в div с идентификатором 'ajaxDiv'. (ajax div внутри вывода страницы, где будут отображаться все сгенерированные ajax выходные данные).

Когда я ввожу 'joh', прослушиватель событий (keyup) записывает нажатые клавиши (например, 'Joh'), и это корректно выводится в JS console.log ();

Тем не менее, мне кажется, что я не могу получить список из шести человек, чье имя начинается с 'Joh', для отображения под текстовым полем. Ничто не отображается под текстовым полем, и я ожидаю, что это потому, что я не передал search_param обратно этому ajaxDiv.

Если этот код находится в нормальном потоке php, сценарии работают, поэтому мне нужно понять часть ajax. (та часть, которая должна обеспечивать вывод списка под текстовым полем).

Ниже приведен код, который работает в обычном выводе php. Это также код, который появляется в сгенерированном ajax div на моей странице.

<form style='float:left;padding:0' action="url-of-a-page" method='get'>
<input type='hidden' name='action' value="part_number_search" />
<table style="padding:0;position:absolute;z-index:2000;background:#eee;overflow:visible">
<tr>
    <td>

<script type="text/javascript">
//<![CDATA[
function lookup4(inputString,id,where)
{

    if(inputString.length < 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&order_id=", {box: ""+where+"", input: ""+inputString+""}, function(data){
    if(data.length >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();
}
// ]]>
</script>





<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');" />
<div class="suggestionsBox" id="suggestions4" style="display: none;">
    <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;"> 
    </div>
</div> 


<script language='javascript' type='text/javascript'>
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();
</script>

</td>
<td style="vertical-align:top;">
  <input type='hidden' name='business_id' value="62595" />
  <input type='submit' value='Search Retail Catalogue'/>
</td>
</tr>
</table>
</form>
</div>

Это слушатель в основном скрипте, который выводит div ajax.

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

});

Мне нужно, чтобы результаты были помещены под текстовым полем. Подумав еще немного о том, как я это написал, я думаю, мне нужно передать search_param обратно ajaxDiv в функции, приведенной выше. Или, возможно, он должен быть передан обратно в код ajax, который отправляется на запрос?

Как этот search_param должен быть передан обратно в код поиска ajax внутри div ajax (без перезагрузки и потери ранее введенных символов - 'j', 'o', 'h' ??

Bazz