-2

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

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

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

因此，您已经看到了正是我的问题的标题。

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

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

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

有点像谷歌，但不像列表中已经存在的那样用户可以通过滚动条导航列表，但为了简化搜索栏，他不应该点击搜索或点击输入，因为他在该列表中键入了常见的剩余部分并且该类型的不常见消失了。

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

并点击好友按钮，

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

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

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

当您开始在那里输入名称时，与您输入的名称相似的朋友会出现，其余的开始消失。

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

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

-再次感谢。

4

3 回答 3

3

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

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

这是您需要的：

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

在开发界，这种类型的功能被称为“ javascript自动完成”或“ Jquery自动完成”

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

于 2013-10-19T19:25:03.297 回答
0

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

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

（书籍）Javascript - 好的部分

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

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

于 2013-10-23T12:46:50.150 回答
0

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

                   }

               });
于 2014-04-04T17:26:06.740 回答