Question

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

我所知道的： Actionscript 3.0 HTML CSS 一点点的javascript（LITTLE BIT !!!） DATS IT !!!

我非常乐意学习以下任何事情和所有事情：

所以，你已经看到了标题，这正是我的问题。

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

当用户在该搜索栏中输入类似于他所输入内容的列表项时，开始出现在列表的下方，

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

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

例如。在Facebook上转到个人资料页面时

并点击朋友按钮，

下面有一个朋友列表，

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

但那里还有一个搜索栏不是在顶部，而是在朋友小组中，这将是在寻找朋友，

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

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

此外，我必须按照客户要求执行此操作。

- 再次感谢。

Answer 1

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

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

以下是您的需求：

您需要一个带搜索框的HTML页面
您需要有一个数据源来从中提取自动完成的项目（此可以是一个文件）
搜索框将使用“on”绑定事件
每次用户输入

在开发圈中，此类功能称为“javascript autocomplete”或“Jquery autocomplete”

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

Answer 2

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

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

（书）Javascript - 好的部分

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

由于您已经有一个包含项目的列表，因此您应该可以非常快速地添加它。如果此列表尚未包含在HTML中，那么Rich Peck的答案可能更合适。

Answer 3

我认为这会奏效。我用它来显示表中的行。首先，您必须在页面加载中将所有数据加载到表中。之后，您隐藏与搜索查询不匹配的行。这里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');

                   }

               });

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

3 个答案: