How do create a related search terms?-CodePudding

I'm working on a school project in code.org for my CS class. I'm trying to build an app that is about the bird.(We are learning about list/arrays, loops, and traversals) In the project I'm trying to build a search box where people can type the name of the bird and in the next page will show up the information about the bird. (Those information are from the code.org data library, it has a lot of lists of datasets that you can use to build your app)

The code looks like this:

// 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]);
}

But I'm afraid that no one will know those bird's name because you have to search the exactly same name in the list, then my app will be useless. So I am thinking to build a thing that will show the most related name depends on the user input.

It's like if you put 'Am' in the search box and it will show 'American Goldfinch', 'American Purple Gallinule' ... under the search box.

For example:

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

CodePudding user response：

great first question and welcome! There are a lot of things here that you may wish to consider, such as the event that triggers the search - does the search happen when you click a button or when text is typed? If it is the latter then you may also want to think about debouncing the event, which is essentially adding a slight delay to calling the method to prevent it firing too many times and causing performance related issues, though I realise that this is probably a bit further on in your learning, but definitely something worth investigating as your learning progresses.

However, to get to the point of your question, I think it is probably best to look at a filter method to filter the array of results, with something like this:

const birdSearch = getText('searchInput');

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

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

Hopefully that should give you a starter for ten!