我正在code.org上为我的CS课程做一个学校项目.我正在try 构建一个关于鸟的应用程序.(我们正在学习列表/数组、循环和遍历) 在这个项目中,我试图建立一个搜索框,人们可以在其中键入鸟的名字,并在下一页将显示有关鸟的信息.(这些信息来自code.org数据库,它有许多数据集列表,您可以用来构建您的应用程序)

代码如下所示:

// code.org is using ES5
var birdSearch = getText('searchInput');
  for(var i = 0; i < birdNameList.length; i++) {
    if (birdSearch === birdNameList[i]) {
     setText('birdNameOutput', birdNameList[i]);
     setText('birdDietOuput', birdDietList[i]);
     setText('birdImageOutput', birdImageList[i]);
}

但我担心没有人会知道这些鸟的名字,因为你必须在列表中搜索完全相同的名字,然后我的应用程序将毫无用处.因此,我正在考虑构建一个将根据用户输入显示最相关的名称的东西.

这就像如果你在搜索框中输入‘am’,它会显示‘American Goldfinch’,‘American Purple Gallinule’……在搜索框下面.

例如:

search box: Am______
do you mean: American Goldfinch American Purple Gallinule ...

推荐答案

很好的第一个问题,欢迎!这里有很多事情您可能希望考虑,例如触发搜索的事件--搜索是在您单击按钮时发生还是在输入文本时发生?如果是后者,那么您可能还想考虑debouncingthe事件,这实质上是为调用该方法增加了一点延迟,以防止它激发太多次并导致与性能相关的问题,尽管我意识到这可能是您学习的更深入的部分,但随着学习的进展,这肯定是值得研究的事情.

然而,为了切入您的问题的重点,我认为最好使用Filter方法来过滤结果数组,如下所示:

const birdSearch = getText('searchInput');

const searchList = birdNameList.filter(function(bird) {
  return bird.includes('birdSearch');
});

setText('suggestionBox', 'Do you mean: ' + searchList.join(', ') + '?');

希望这能给你一个十次的首发机会!

Javascript相关问答推荐

有什么(最佳)方法可以从模块中获取脚本模块的多姆元素吗?

在贝塞尔曲线的直线上找不到交叉点:(使用@Pomax的bezier.js)

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗?

将状态向下传递给映射的子元素

Mongoose post hook在使用await保存时不返回Postman响应

我正在建立一个基于文本的游戏在react ,我是从JS转换.我怎样才能使变量变呢?

Html文件和客户端存储的相关问题,有没有可能?

连接到游戏的玩家不会在浏览器在线游戏中呈现

环境值在.js文件/Next.js中不起作用

查询参数中的JAVASCRIPT/REACT中的括号

Reaction组件在本应被设置隐藏时仍显示

Jest toHaveBeenNthCalledWith返回当前设置的变量值,而不是调用时的值

一个实体一刀VS每个实体多刀S

在JS中动态创建对象,并将其追加到HTML表中

当代码另有说明时,随机放置的圆圈有时会从画布上消失

通过跳过某些元素的对象进行映射

JavaScript&;Reaction-如何避免在不使用字典/对象的情况下出现地狱?

正则表达式以确定给定文本是否不只包含邮箱字符串

如何在加载页面时使锚定标记成为焦点

如何使用Reaction/Redux创建购物车逻辑?