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

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

我所知道的是： ActionScript3.0 HTML CSS 一点点javascript（一点点！！！） 没错

我非常愿意学习任何东西和一切，以实现以下目标：

因此，你已经看到了标题，这正是我的问题

基本上我有一个列表，上面有一个搜索栏

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

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

有点像谷歌，但不太像 由于列表已经存在，用户可以通过滚动条浏览列表，但为了简化，在输入时，他不必点击搜索或回车键，常见的保留在列表中，不常见的消失

当你转到个人资料页面时，在facebook上

点击“朋友”按钮

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

你可以滚动列表找到你的朋友

但那里也有一个搜索栏 不是在上面，而是在朋友面板上，上面写着搜索朋友

当你开始键入一个名字时，与你正在键入的名字相似的朋友就会出现，而其余的朋友则开始消失

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

我也要尽快按客户要求做

---

-再次感谢。

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

您可以在此处看到我们的一款具有此功能的开发应用程序：

---

以下是您需要的：

您需要一个带有搜索框的HTML页面

您需要有一个数据源来从中提取自动完成项目（可以是文件）

搜索框将通过Javascript使用“on”绑定事件链接到数据源

每次用户键入时，java都需要使用相关对象更新表单

在开发圈中，这种类型的功能称为“”或“”

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

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

（书）Javascript——好的部分

基本JQuery教程

---

因为你已经有了一个包含项目的列表，你应该能够很快地添加它。如果这个列表还没有HTML格式，那么Rich Peck的答案可能更合适。

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

                   }

               });

---

谢谢你的快速回复，是的，我知道这一点，我可能需要一个数据库，我不知道这是否有帮助，但名单可能有超过10万个项目，所以。。。下一个是api，第三个是ajax，这是唯一的方法，因为你告诉我的任何事情我都能做到，所以如果有比ajax更好的东西，请告诉我。正如您所知，我目前不知道任何语言，我使用的任何语言都将成为我的语言，我希望您能理解。好的，API=“”--这是一种允许您连接到亚马逊或Facebook等网站并在应用程序中直接使用其数据的技术。是一种允许您通过Javascript向服务器发送请求的技术，也是允许许多web应用程序不刷新页面的技术。根据我的经验，最好不要使用某一种特定的语言，而是采用一种编程方法来帮助您创建人们可以使用的真正伟大的体验。举个例子，如果你喜欢游戏，那么学习基于网络的开发可能不是最好的选择。好吧，看来你正在寻找一个可以遵循的教程，或者至少是一些可以让你深入学习的东西。我会更新我的答案给你更多的想法。只是提醒一下——你在这里提出的问题越具体，回答就越有帮助：）@wizarry，我能给你提点建议吗？看看Rich Peck投入了多少时间和精力来回答你的问题。也许你会有礼貌地花一小部分他的努力，使你的评论和原始问题更容易阅读，你知道，也许只是花时间使用正确的拼写和标点符号。我这样说可能有点迂腐，但由于格式问题（或者更确切地说，缺乏格式），你的问题确实需要花费双倍的时间来通读。此外，你可能想对Rich的答案投上更高的票，至少是因为他在这方面付出了巨大的努力。我为可能付钱给你的“客户”感到抱歉。