AJAX On Keyup 搜索功能

Question

我编写了一个 AJAX 搜索函数，它在 key up 上抓取关键字值并触发脚本。我的目标是让它填充内容区域的每个键，将结果重新排序为 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);
});