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

时间:2011-04-07 15:19:49

标签: javascript jquery ajax forms

我目前正在开展一个项目,而且客户要求的功能需要javascript的帮助 - 我不是专家,我可以做基础等但不知道从哪里开始这个,在网站上有一个表格(如高级搜索),在右边它应该显示结果的总数,但它需要在填写表格时不断更新,以便用户填写表格更新结果总数以反映......

我想也许可以用ajax完成,传递输入的内容/值,执行查询然后传回结果总数,但是它如何适用于每个输入,不仅仅是过度杀戮,我试图告诉客户这将是服务器上的压力(肯定会是这样)但是他们看起来已经死了......

任何帮助或技巧都会非常有用,或者如果你之前遇到过这样的问题,请告诉我。

由于

2 个答案:

答案 0 :(得分:1)

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

这样,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
   }
});

答案 1 :(得分:0)

我倾向于避免这种事情,就像你说它可能会对服务器造成压力。以下是帮助降低风险的一些方法:

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

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

因此用户会看到类似的内容:

搜索:“” 回复There are about 3097 records relevant to your search

搜索:“Ap” 回复There are about 1567 records relevant to your search

搜索:“Apple” 发出ajax请求 回复There are 542 records relevant to your search