我如何创建一个在输入时更新的搜索栏答案

【问题标题】：How do i create a search bar which updates on typing我如何创建一个在输入时更新的搜索栏
【发布时间】：2013-10-28 12:04:37
【问题描述】：

基本上我不知道php，也不知道javascript，也不知道任何数据库语言

我所知道的：动作脚本 3.0 HTML CSS 一点点javascript（一点点！！！）数据吧！！！

我非常愿意学习任何东西来完成以下任务：

所以，你看到的标题正是我的问题。

基本上我有一个包含项目的列表，顶部有一个搜索栏，

当用户在该搜索栏中键入时，与他键入的内容相似的列表项开始出现在列表下方，

其他列表项开始消失，只剩下那些常见的。

有点像谷歌，但不完全是因为在列表中已经存在，用户可以通过滚动条导航列表，但为了简化搜索栏，他不必点击搜索或点击输入，因为他在该列表中键入了常见的保留，并且该类型的不常见消失了。

例如。进入个人资料页面时在 facebook 中

然后点击好友按钮，

下面已经显示了一个好友列表，

您可以滚动浏览该列表并找到您的朋友，

但那里也有一个搜索栏不是在顶部，而是在朋友面板中，它会说搜索朋友，

当你开始输入一个名字时，与你输入的相似的朋友会出现，其余的开始消失。

任何帮助都是好的。如果你给我指点一些教程来做这件事，即使你告诉我要学习整个 php，我也会很高兴，因为我不知道脚本语言会让这成为可能，但如果你告诉我，请这样做通过我可以开始学习的链接。

我也必须尽快满足客户的要求。

-再次感谢。

【问题讨论】：

我为可能付钱给你做这件事的“客户”感到抱歉。

标签： search

【解决方案1】：

我认为这会奏效。我用它来显示表格中的行。首先，您必须在页面加载中将所有数据加载到表中。之后，您隐藏与您的搜索查询不匹配的行。这里search是文本框的id，data-row是表中数据行的类。

$('input[name="search"]').keyup(function () {

                   var searchterm = $(this).val();

                   if (searchterm.length > 0) {

                       var match = $('tr.data-row:contains("' + searchterm + '")');

                       var nomatch = $('tr.data-row:not(:contains("' + searchterm + '"))');

                       match.addClass('selected');

                       match.css("display", "");
                       nomatch.css("display", "none");

                   } else {

                       $('tr.data-row').css("display", "none");

                       $('tr.data-row').removeClass('selected');

                   }

               });

【讨论】：

【解决方案2】：

http://julesjanssen.github.io/chosen/

所选的 javascript 库采用常规 html 列表，并允许您根据键入的内容对其进行过滤。这很简单，但确实需要一些 javascript / jquery 知识。要获得这些知识，您可以尝试：

（书籍）Javascript - 好的部分

基本的 JQuery 教程 http://learn.jquery.com/about-jquery/how-jquery-works/

由于您已经有一个包含项目的列表，您应该能够很快地添加它。如果这个列表还没有在 HTML 中，那么 Rich Peck 的答案可能更合适。

【讨论】：

【解决方案3】：

这些脚本通过连接到数据源（通常是数据库，但也可以是 API）来工作，然后在您每次键入时使用 Ajax 向链接发送请求。我会写一些代码，但我认为你目前还处于研究阶段！

您可以在此处查看我们的一款具有此功能的开发应用程序：http://firststop.herokuapp.com

这是你需要的：

您需要一个带有搜索框的 HTML 页面
您需要有一个数据源来从中提取自动完成项目（此可以是一个文件）
搜索框将通过 Javascript 使用“on”绑定事件链接到数据源
每次用户键入时，您的 java 都需要使用相关对象更新表单

在开发界，这种类型的功能称为“javascript autocomplete”或“Jquery autocomplete”

以下是此类功能的一些顶级教程：

【讨论】：

感谢您的快速回复，是的，我有点意识到这一点，我可能需要一个数据库，我不知道它是否有帮助，但列表中可能有超过 10 万个项目，所以.. . 接下来就是 api，第三个是 ajax 唯一的方法，因为你告诉我的任何事情我都会得到它，所以如果有比 ajax 更好的东西，请告诉我。如您所知，到目前为止，我不知道任何语言，从现在开始，我会使用的任何语言都将成为我的语言，我希望您能理解。
好的，一个 API = "Application Programming Interface" -- 它是一种允许您连接到亚马逊或 Facebook 等网站并在您的应用程序中直接使用它们的数据的技术。 Ajax 是一种允许您通过 Javascript 向服务器发送请求的技术，它允许许多这些 Web 应用程序不刷新页面
根据我的经验，最好不要让自己与一种特定的语言保持一致，而是采用一种编程方法来帮助您创造人们可以使用的真正出色的体验。例如，如果您喜欢游戏，那么学习基于 Web 的开发可能不是最好的选择。
好的，看来您正在寻找一个教程来学习，或者至少是一些可以让您开始学习的东西。我会更新我的答案，给你更多的想法。提醒一下——你在这里提出的问题越具体，回答就越有帮助:)
@Wizardry，我可以提出一些建议吗？看看 Rich Peck 投入了多少时间和精力来回答您的问题。也许您愿意花他的一小部分努力使您的 cmets 和原始问题更易于阅读，您知道，也许只是花时间使用正确的拼写和标点符号。我这么说似乎有点迂腐，但由于格式（或者更确切地说，缺乏格式），你的问题确实需要双倍的时间来阅读。此外，您可能想要支持 Rich 的回答，至少是因为他付出了巨大的努力。