Question

在文本框中输入文本会触发ajaxRequest来查找Db的结果。这些结果应在文本框下方的列表中输出，并在单击可能的匹配项之一时，将其值移动到文本框中，以通过“提交”按钮提交。

然后，提交按钮触发另一个ajaxRequest / output，以便所选“ John”的数据将显示在同一ajax div中。（与文本框表单位于同一ajax div中）。该部分是一个单独的问题，我将继续处理，但现在，我需要获取可能的匹配项，以显示在输入搜索字符的文本框下方。

当放置在脚本的php输出中时，该过程可以正常运行。

我现在需要它在ajax生成的div中工作，因此我正在使用侦听器。但是，来回传递数据使我感到困惑。

所以；从一开始...。我单击一个表单提交按钮（在视觉上，这是网页中的一个功能按钮-“按名称查找”）。

这成功生成了用于查找客户名称（例如“ John”）的文本框和提交按钮，并显示在ID为“ ajaxDiv”的div中。（页面输出中的一个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>

这是输出ajax div的主脚本中的侦听器。

// 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'？

爵士

如何将搜索词传递回ajax生成的div？

0 个答案: