Question

在下面，您可以看到我的代码。 #proname是我的文本框。页面加载时间我将调用api并将数据填充到auto complete source属性中。在文本输入时间它非常慢。因为在我的表中我有20000条记录。所以请给我一个解决这个问题的替代方案。

$.ajax({
        type: "GET",
        url: serverbase+"Site/GetModels",
        contentType: "application/json"
    }).done(function (data) {
        var src = data.map(function (element) {
            return element.name;
        });
        $("#proname").autocomplete({
            source: src
        });

    });

Answer 1

除了@Boy With Silver Wings评论之外，您应该对响应进行分页，这样您只能获得这么多记录而不是所有记录。这也减少了服务器负载以及前端的加载时间。

要回答您的问题，自动填充功能要求您的ajax调用在完成请求之前完成。如果必须获得所有结果，请在本地存储结果，而不是执行AJAX请求。

在不知道您的后端运行的情况下，我无法真正为您提供分页数据的示例： - ）

Answer 2

您应避免在单个请求中提取数据，而是根据自动填充请求查询数据。例如，看一下这个例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-loading {
    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( "Selected: " + ui.item.value + " aka " + ui.item.id );
      }
    });
  } );
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds">
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>


</body>
</html>

这里描述：

https://jqueryui.com/autocomplete/#remote

自动完成是非常慢我的页面在搜索时挂起？

2 个答案: