Jquery UI自動完成w /無限滾動

我試圖在我的自動完成文本框中的滾動中加載更多數據當用戶向下滾動時，它會像分頁加載所需的分頁結果。Jquery UI自動完成w /無限滾動

類似this。

我一直在尋找相當長的一段時間，我有發現像我的類似問題的問題。

 <div class="ui-widget"> 
       <label for="tags">Enter Company Name: </label> 
       <input id="tags" class="form-control"> 
      </div> 

    <script> 
$(function() { 
     $("#tags").autocomplete({ 
      source: 'function/all_company_auto.php' 
     }); 
     }); 
</script>

這是我的php代碼。

<?php 
$get_company = "SELECT DISTINCT companies.company 
     FROM companies 
     INNER JOIN target_details 
     ON companies.company_id = target_details.company_id 
     WHERE companies.company LIKE \"%$company%\" 
     LIMIT 100 OFFSET 10 
     "; 
     if($run_company = $conn->query($get_company)){ 
      while($row = $run_company->fetch_assoc()){ 
       $data[] = $row['company']; 
      } 
      echo json_encode($data); 
     } 
?>

來源

2017-04-03 rai nalasa

似乎很難證明經常碰到服務器......難道你不能只發送一次所有可能的值嗎？ –

@MatthewGoulart你能解釋一下嗎？ –

我做了很多假設，但是，每次用戶向下滾動x次時，您的自動填充框都不會請求更多的服務器值，爲什麼不直接在一個請求中發送所有可能的值？這可以避免無緣無故地擊中服務器。 HTTP請求的開銷很大，如果你可以避免它，你應該。 –

首先，您的PHP需要能夠收集一定量的結果。

這可能是這樣的：

<?php 
$start = isset($_POST['o']) ? int($_POST['o']) : 0; // Offset 
$count = isset($_POST['l']) ? int($_POST['l']) : 100; // Limit 
$company = $conn->real_escape_string($_POST['term']); // Search Term, protected from SQL Injection 

$get_company = "SELECT DISTINCT companies.company 
    FROM companies 
    INNER JOIN target_details 
    ON companies.company_id = target_details.company_id 
    WHERE companies.company LIKE \"%$company%\" 
    LIMIT $count OFFSET $start"; 
if($run_company = $conn->query($get_company)){ 
    while($row = $run_company->fetch_assoc()){ 
     $data[] = $row['company']; 
    } 
    echo json_encode($data); 
} 
?>

所以現在，當我們要求更多的數據，例如，我們可以發送{ o: 10, l: 100, term: "app" }。從您給出的示例中拉出，它可能看起來有點像這樣：

_scrollMenu: function(ul, items) { 
    var self = this; 
    var startShow = 10; 
    var maxShow = 100; 
    var results = []; 
    var pages = Math.ceil(items.length/maxShow); 
    $.ajax({ 
    url: "function/all_company_auto.php", 
    type: "POST", 
    data: { 
     o: startShow, 
     l: maxShow, 
     term: self.request.term 
    }, 
    dataType: "json", 
    sucess: function(data); 
    $.each(data, function(k, v) { 
     results.push(v); 
    }); 
    }); 
    //results = items.slice(startShow, maxShow); 

    if (pages > 1) { 
    $(ul).scroll(function() { 
     if (isScrollbarBottom($(ul))) { 
     ++window.pageIndex; 
     if (window.pageIndex >= pages) return; 

     results = items.slice(window.pageIndex * maxShow, window.pageIndex * maxShow + maxShow); 

     //append item to ul 
     $.each(results, function(index, item) { 
      self._renderItem(ul, item); 
     }); 
     //refresh menu 
     self.menu.deactivate(); 
     self.menu.refresh(); 
     // size and position menu 
     ul.show(); 
     self._resizeMenu(); 
     ul.position($.extend({ 
      of: self.element 
     }, self.options.position)); 
     if (self.options.autoFocus) { 
      self.menu.next(new $.Event("mouseover")); 
     } 
     } 
    }); 
    } 

    $.each(results, function(index, item) { 
    self._renderItem(ul, item); 
    }); 
}

此示例的問題是項目的數量已知。你將不得不做一個初步的查詢來收集可能的結果。所以這將開始分崩離析。這也不是自動完成的最佳使用。

如果你可以澄清爲什麼你想得到這麼多的結果，而不是限制它，它會更好。

來源

2017-04-05 02:32:20 Twisty

Jquery UI自動完成w /無限滾動

回答

相關問題