weixin_33738578 2016-02-15 21:39 采纳率: 0%
浏览 37

AJAX On Keyup搜索功能

I wrote a AJAX search function which grabs the keyword values on key up and fires off the script. My goal is to have it populate the content area every key reordering the results to be in ABC order.

Instead what's happening is the first key fires off and the top result is always this


then the rest of the values under it are in no specific order that I can tell.

I think this has to do with escaping characters?

Any help would be appreciated. Please help me get this to function so as a user searches the content area reorders itself being in order based on the keyword being searched up to the value that has been entered at that time.

On page load 5 results are added to the page then on page scroll more results are added to the page like this,

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

function displayRecords(lim, off) {
          type: "GET",
          async: false,
          url: assetPath,
          data: "limit=" + lim + "&offset=" + off,
          cache: false,
          beforeSend: function() {
          success: function(html) {
            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;

Then when a user wants to search they use this form,

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

Then this ajax function fires off on keyup

$("#itemID").keyup(function (){
    var itemID = $(this).val();
    var url = searchPath;
        type  : "GET",
        async : false,
        url   : url,
        data  : "itemID=" + encodeURIComponent(itemID),
        cache : false,
        success: function(html) {
           $( "#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;

which runs this script at searchPath as the path variable

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);
  $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>';   

The initial data populates perfectly in order from what is in the database. So I do not see why there would be problems for this function if it is a escaping situation.

Also the initial data is paginated. Would this cause a problem with the second query? I was thinking maybe since there is so much data it's all being appended to the content instead of replacing it. Maybe the jquery is conflicting?

  • 写回答

1条回答 默认 最新


      相关推荐 更多相似问题


      • ¥15 通过STM32F4实现智能清洁小车,要求用到三个以上传感器
      • ¥15 perl代码解释说明
      • ¥15 列举 五阶幻方 有多少种
      • ¥15 请教一下能人在VS中调用MATLAB绘制动态驻波
      • ¥15 VB.NET如何调用Microsoft Excel?(WPS存在时)
      • ¥15 KUKA机器人EtherNetIP通讯配置教程
      • ¥15 VB6.0如何模拟键盘组合按键
      • ¥15 python怎么替换这个word里边内容
      • ¥15 做谷歌浏览器插件的时候,怎么在background.js中优先执行其他.js文件里面函数呀?
      • ¥15 win 10家庭版非管理员账户如何获取管理权限