Question

 $("#search_customer").autocomplete({

    source: function (request, response) {

         $.ajax({
             url: "<?php echo base_url(); ?>" + "sales/get_customers",
             type: 'GET',
             data:request,

             success: function (data) {
                 var object = JSON.parse(data);


                if(object.length!=0){

                $("#add_customer_div").hide();
                 response($.map(object, function (el) {

                     return {
                         label: el.phone,
                         value: el.name,
                         id:    el.CustomerID
                     };
                 }));


                }else{
                  // $("#add_customer_div").show();
                }
             }
         });

    },
    select: function (event, ui) {

        this.value = ui.item.label;


        $(".ui-menu-item").hide();

        event.preventDefault();
    }
});

以上代码工作正常，但没有限制数据，它包含数千行，但我想将其限制为最多10或20。我正在尝试但未能做到。

Answer 1

你可以.slice你的对象，只包含10-20个项目，下面是你的成功回调，在对象上应用了一个简单的切片，其余的代码就是你写的。这不使用上面的循环。

success: function(data) {
    var object = JSON.parse(data);


    if (object.length != 0) {

        $("#add_customer_div").hide();
        object = object.slice(0, 10)
        response($.map(object, function(el) {

            return {
                label: el.phone,
                value: el.name,
                id: el.CustomerID
            };
        }));


    } else {
        // $("#add_customer_div").show();
    }
}

但是如果你可以（如果你可以控制服务器）更高效的是制作一个只能返回10-20个项目的端点，这样可以节省你转移所有你不使用的数据。

Answer 2

如果你不能限制api发送的结果，你可以使用for循环而不是像这样的地图

var result=[];
if(object.length!=0){
   for(i=0;i<limit;i++){
       result.push(object[i])
   }
}
$("#add_customer_div").hide();
 response($.map(result, function (el) {
         return {
                 label: el.phone,
                 value: el.name,
                 id:    el.CustomerID
                 };
  }));

Answer 3

沿ajax请求发送“限制”：

var limit = 20;  // the amount you wish.

$.ajax({
   url: "<?php echo base_url(); ?>" + "sales/get_customers" + "?n="+limit,
   //...

然后在你的PHP资源中：

<?php

$default_n = 10;  // a default value in case of omission.

if(isset($_GET['n'])){
  $n = $_GET['n'];
}else{
  $n = $default_n;
}

// Use this $n in the SQL statement.
// Example:
$sql = "SELECT * FROM table WHERE somecolumn='SomeValue' limit $n";

// ...

注意您应该不完全按照此示例使用$n变量。
您应该使用mysqli或PDO参数化查询...以避免SQL注入但这完全超出了你的问题范围。

限制jQuery自动完成结果

3 个答案: