AJAX On Keyup搜索功能

Question

我编写了一个AJAX搜索功能，该功能可以在按键时获取关键字值并启动脚本。 我的目标是让它在每个键中填充内容区域，从而将结果重新排序为ABC顺序。

相反，发生的事情是第一个键被触发，而最高的结果总是这样

*ENGRAVING

那么我可以说出的其余值没有特定的顺序。

我认为这与转义字符有关吗？

任何帮助，将不胜感激。 请帮助我使此功能起作用，以便用户搜索内容区域时根据搜索到的关键字（直到当时输入的值）将自身重新排序。

在页面加载时，将5个结果添加到该页面，然后在页面滚动时，将更多结果添加到该页面，

var assetPath = "<?php echo $assetPath ?>";
var searchPath = "<?php echo $searchPath ?>"; 

function displayRecords(lim, off) {
  jQuery.ajax({
          type: "GET",
          async: false,
          url: assetPath,
          data: "limit=" + lim + "&offset=" + off,
          cache: false,
          beforeSend: function() {
            $("#loader_message").html("").hide();
            $('#loader_image').show();
          },
          success: function(html) {
            $("#productResults").append(html);
            $('#loader_image').hide();
            if (html === "") {
             $("#loader_message").html('<button data-atr="nodata" class="btn btn-default" type="button">No more records.</button>').show();
            } else {
             $("#loader_message").html('Loading... Please wait <img src="http://www.example.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
            }
            window.busy = false;
          }
        });
}

然后，当用户要搜索时，他们使用此表单，

<div class="form-group pull-right">
                    <input type="text" name="itemID" id="itemID" class="search form-control" placeholder="Search product number">
            </div>

然后这个ajax函数在keyup上触发

$("#itemID").keyup(function (){
    var itemID = $(this).val();
    var url = searchPath;
    $.ajax({
        type  : "GET",
        async : false,
        url   : url,
        data  : "itemID=" + encodeURIComponent(itemID),
        cache : false,
        success: function(html) {
              $('#loader_image').hide();
           $( "#productResults" ).replaceWith( html );

              if (html === "") {
                  $("#loader_message").html('<p>There were no results that match your search criteria</p>').show();
              } else {
                  $("#loader_message").html('Searching... Please wait <img src="http://www.example.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
              }
              window.busy = false;
        }
      });
});    

它在searchPath上将此脚本作为路径变量运行

require_once ('Dbconfig.php');
  $sql=" SELECT * FROM wuno_inventory WHERE wuno_product like '%".$itemID."%' OR wuno_alternates like '%".$itemID."%' ORDER BY wuno_product ";

  try {
  $stmt = $DB_con->prepare($sql);
  $stmt->execute();
  $results = $stmt->fetchAll();
} catch (Exception $ex) {
  echo $ex->getMessage();
}
if (count($results) > 0) {
  foreach ($results as $res) {
    echo '<tr class="invent">';  
    echo '<td>' . $res['wuno_product'] . '</td>';  
    echo '<td>' . $res['wuno_alternates'] . '</td>';  
    echo '<td>' . $res['wuno_description'] . '</td>';  
    echo '<td>' . $res['wuno_onhand'] . '</td>';  
    echo '<td>' . $res['wuno_condition'] . '</td>';  
    echo '</tr>';   
  }
}

初始数据从数据库中开始按顺序完美填充。 因此，我不明白为什么这种功能在逃避时会出现问题。

初始数据也被分页。 这会导致第二个查询出现问题吗？ 我在想，也许是因为有太多数据，所有数据都被附加到了内容上，而不是替换了它。 也许jquery有冲突？

Answer 1

尝试为您的AJAX调用引入超时。 首先将AJAX JS移到一个单独的函数中：

function get_search_results(event) {
    var itemID = $(event.target).val();
    var url = searchPath;
    $.ajax({
        type  : "GET",
        async : false,
        url   : url,
        data  : "itemID=" + encodeURIComponent(itemID),
        cache : false,
        success: function(html) {
              $('#loader_image').hide();
           $( "#productResults" ).replaceWith( html );

              if (html === "") {
                  $("#loader_message").html('<p>There were no results that match your search criteria</p>').show();
              } else {
                  $("#loader_message").html('Searching... Please wait <img src="http://www.example.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
              }
              window.busy = false;
        }
      });
}

然后将其添加到您的keyup处理程序中：

$("#itemID").keyup(function (){
    setTimeout(get_search_results, 200);
});