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

AJAX On Keyup搜索功能

1 个答案: