设计问题 Active Record 搜索与 Javascript 搜索

发布于 2024-11-09 05:40:26 字数 308 浏览 0 评论 0原文

我的表中有 300 条记录,其中包括以下内容:姓名、地址、城市、州和邮政编码。

  1. 我想在用户访问我的应用程序时提取所有 300 条记录一次,可能是 JSON 格式(但不一定,可以是数组或 ruby​​ 对象),隐藏在视线之外,但在客户端。
  2. 我想在客户端搜索这些记录

是否存在任何简单的 Javascript/JQuery 库,我可以在其中搜索客户端数据并简单地显示匹配结果。我应该考虑这种方法有什么缺点吗?

功能:用户访问应用程序,用户看到搜索栏,用户输入“Toledo”,应用程序返回 2 条匹配的托莱多记录。

I have 300 records in a table that include the following: Name, address, city, state and zip code.

  1. I want to pull All 300 records once when a user access my application, perhaps in JSON format (but not necessarily, could be an array or ruby object), hidden out of sight, but on the client side.
  2. I want to search those records on the Client side

Are there any simple Javascript/JQuery Libraries in existence where I could search the client side data and simply display the matching result. Are there any disadvantages I should consider with this approach?

Feature: User visits app, User sees a search bar, User types in "Toledo" and the app returns 2 matching toledo records.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

望她远 2024-11-16 05:40:26

这非常简单。除了在找到结果后进行 DOM 操作之外,不确定您需要库做什么。

function searchArrayFields(search, objectArray)
{
     var results = [];
     for (var i=0; i < objectArray.length; i++)
     {
        for (var key in objectArray[i])
        {
            if (objectArray[i][key].indexOf(search) > -1)
            {
                results.push(objectArray[i]);
                break;
            }
        }
     }
     return results;
}

这里还有一些 dom 的例子。

function buildAddress(row)
{
   var retVal = '<div class="container"><div class="name">'+row.name + '</div>';
   retVal += '<div class="address-line-1">'+ row.address+'</div>';
   retVal += '<div class="address-line-2"><span class="city">'+ row.city+'</span>';
   retVal += ' <span class="state">'+ row.state+'</span>';
   retVal += ', <span class="zip">'+row.zip+'</span></div></div>';
   return retVal;
}
function displayAddresses(search)
{
   var rows = searchArrayFields(search, global_db);
   var retVal = [];
   for (var i=0; i < rows.length; i++)
   {
       retVal.push(buildAddresses(rows[i]));
   }
   $('#target').html(retVal.join(''));
}

假设您的数据像这样存储,这将是标准 JSON 设置:

[{name:'John Doe', address:'111 Main Street', city:'Toledo', state:'OH',zip:44343}];

It is pretty straight forward. Not sure what you need a library for, other than to do the DOM manipulation once you've found your results.

function searchArrayFields(search, objectArray)
{
     var results = [];
     for (var i=0; i < objectArray.length; i++)
     {
        for (var key in objectArray[i])
        {
            if (objectArray[i][key].indexOf(search) > -1)
            {
                results.push(objectArray[i]);
                break;
            }
        }
     }
     return results;
}

Here's some example dom stuff too.

function buildAddress(row)
{
   var retVal = '<div class="container"><div class="name">'+row.name + '</div>';
   retVal += '<div class="address-line-1">'+ row.address+'</div>';
   retVal += '<div class="address-line-2"><span class="city">'+ row.city+'</span>';
   retVal += ' <span class="state">'+ row.state+'</span>';
   retVal += ', <span class="zip">'+row.zip+'</span></div></div>';
   return retVal;
}
function displayAddresses(search)
{
   var rows = searchArrayFields(search, global_db);
   var retVal = [];
   for (var i=0; i < rows.length; i++)
   {
       retVal.push(buildAddresses(rows[i]));
   }
   $('#target').html(retVal.join(''));
}

Assumes your data gets stored like this, which would be a standard JSON setup:

[{name:'John Doe', address:'111 Main Street', city:'Toledo', state:'OH',zip:44343}];
゛时过境迁 2024-11-16 05:40:26

也许 jQuery 自动完成插件 适合这种情况

Maybe the jQuery autocomplete plugin would work well for this situation

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文