Ajax自动完成并填充下拉列表

时间:2017-10-15 20:19:56

标签: javascript jquery ajax

我正在使用Spring Boot来创建Web应用程序。 在一个页面上,我有两个输入字段和两个下拉列表。 在输入字段上键入时,它应该使用数据库中的名称自动完成。选择后,下拉列表应填写该用户的数据。 与其他下拉列表相同。

我的问题是,如果我在数据库中拥有数千名或更多用户,这是实现此类目标的最佳方法吗? Cuz会在每个键上发出请求。 或者有更有效的方法来做到这一点?什么表明在可能增长的数据库中效率更高?

谢谢

2 个答案:

答案 0 :(得分:0)

使用方法:根据用户输入的前2或3个字符从db中获取数据并在本地保存数据,然后对保存的数据集应用过滤器。如果输入值发生变化,并且前2或3个字符与提取初始数据的字符不匹配,则从db再次获取。

答案 1 :(得分:0)

您可以只查询数据库when user stops typing,而不是每次按键调用数据库。我通常喜欢500毫秒,但你可以尝试这个数字并进行调整。

以下是一些解释这个想法的示例代码。



$(document).ready(function() {
  function App() {
    $("#app").keyup(function(e) {
      this.query = e.target.value;
      this.delaySearch && clearTimeout(this.delaySearch);
      this.delaySearch = setTimeout(() => {
        // your code to get data from DB
        alert("searching for: " + this.query);
      }, 500);
    });
  }
  App();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Enter your search query here: </span><input id="app" type="text">
&#13;
&#13;
&#13;