Javascript 用户填写表单时实时更新结果总数

我目前正在做一个项目，客户要求提供一个需要javascript帮助的功能，我不是javascript专家，我可以做一些基础工作，但我不知道从哪里开始，在网站上有一个表单（比如高级搜索），右边应该显示结果的总数，但它需要在填写表单时不断更新，以便在用户填写表单时更新结果总数以反映

我想也许可以用ajax来完成，传递输入的内容/值，执行查询，然后返回结果的总数，但是它如何处理每个输入，这不是太过分了吗，我试图告诉客户这将对服务器造成压力（当然会是这样的）但他们似乎一意孤行

任何帮助或技巧都将非常有用，或者如果您以前遇到过类似的情况，请务必让我知道

---

谢谢

我倾向于避免这种事情，就像你说的那样，这会给服务器带来压力。以下是我为降低这种风险所做的几件事：

• 仅当用户输入至少3个字符时才执行搜索/计数
• 在内存存储（如或memcached）中缓存搜索项及其结果计数
• 如果您正在运行MySQL数据库，请使用MySQL全文搜索

另一种选择是呈现模糊数。因此，当页面加载时，您会得到记录的总数，然后当用户键入时，您会从总数中随机取出一块记录。一旦用户术语更加具体，或者他们实际单击了submit按钮，您就可以执行实际的Ajax请求以获得实际的计数

因此，用户将看到如下内容：

搜索：“” 响应：

大约有3097条记录与您的搜索相关

搜索：“Ap” 响应：

大约有1567条记录与您的搜索相关

搜索：“苹果” 发出ajax请求

---

响应：

有542条记录与您的搜索相关

使用jQuery，您可以将一个函数附加到“高级搜索”中使用的每个输入控件的事件，以执行对服务器的调用并获得当前的结果数

这样，ajax服务器调用只会在每次输入字段完成且焦点移到别处时触发

当然，如果您有许多字段，那么每次完成或修改字段并移动焦点时，都会产生一个调用。在进行ajax调用之前，确保字段值已更改也是明智的。大致如下：

var tempVal = "";

// Each field that is used in the advanced search will need to have the
// advancedSearchInput class    

$('.advancedSearchInput').focus(function() {
   tempVal = $(this).val();
});

$('.advancedSearchInput').blur(function() {
   if($(this).val() == tempVal) {
      // Get advanced search values and make ajax call
   }
});

---

模糊数似乎是一个很好的解决方案，但您如何将其实际实现到表单中，为每个输入/选择等附加一个ajax函数？