Question

我第一次尝试编写搜索功能。我正在使用AJAX函数来调用密钥上的php文件。这很奇怪，因为它正在改变内容区域中的内容，但它不是正确的内容。

我也使用ajax将表中的数据加载到同一内容区域。我的目标是，当您进行搜索时，它会根据您最后一个密钥提供的条件，使用最相关的数据替换正在查看的数据。

这是我的搜索表单

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

这是AJAX函数，

$("#itemID").keyup(function (){
jQuery.ajax({
          type: "GET",
          async: false,
          url: searchPath,
          data: itemID,
          cache: false,
          success: function(html) {
            $("#productResults").append(html);
        $("#productResults").html(html);    
            $('#loader_image').hide();
            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.wuno.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
            }
            window.busy = false;
          }
        });
});

这是我的php搜索查询

    $sql=" SELECT * FROM wuno_inventory WHERE wuno_product like '%".$itemID."%' OR wuno_product like '%".$itemID."%'";
    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>';   
  }
}

Answer 1

更改

url: searchPath,
  data: itemID,

到

url: your_php_address_file,
 data: {itemID:$(this).val()}

Answer 2

使用下面的有效网址更改您的搜索路径

＆＃13;

$("#itemID").keyup(function (){
    var itemID = $(this).val();
    var url = 'your searchpath here';
    $.ajax({
        type  : "GET",
        async : false,
        url   : url,
        data  : "itemID=" + encodeURIComponent(itemID),
        cache : false,
        success: function(html) {
              $('#loader_image').hide();
              $("#productResults").html(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.wuno.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
              }
              window.busy = false;
        }
      });
});

＆＃13;

注意：使用这样的查询可能会导致sqlinjection所以请小心使用这些sql语句＆＃39;％＆＃34;。$ itemID。＆＃34;％＆＃39;

使用AJAX在Keyup上搜索功能

2 个答案: