Search in array, not only unique values

Question

I have a simple array containing Dutch city names:

var cities = ['Amsterdam', 'Den Haag', 'Den Helder', 'Rotterdam', 'Utrecht', 'Groningen', 'Zoetermeer', 'Zwolle', 'Delft'];

My code to search through this array looks like this:

elems.searchField.on('keyup', function(e) {
    var index, city, result;
    var currentCity = elems.searchField.val().toLowerCase();
    for (index = 0; index < cities.length; ++index) {
        city = cities[index].toLowerCase();

        if (city.indexOf(currentCity) > -1) {
            result = city;
            console.log(result);
            break;
        }
    }
});

elems.optionsButton.on('click', function(e) {
    if (optionButtonState === 0) {
        elems.consoleItemSecondAndThird.css('display', 'flex');
        optionButtonState = 1;
    } else {
        elems.consoleItemSecondAndThird.hide();
        optionButtonState = 0;
    }
});

You can see two cities that start with "Den", these are "Den Haag" and "De Helder". When I type "Den", I need to see them both listed, however, my code only looks up unique values and only shows "Den Haag" when "Den" is inserted for example. How can I make it display all the values that contain the search query?

You get only one result because your variable 'result' yields only one city. You could instead use it as an array and continue the for loop. like result.push(city); continue; — getjackx
– getjackx, Commented Feb 20, 2017 at 11:25

Suren Srapyan · Accepted Answer · 2017-02-20 11:41:48Z

4

You can use filter() to get the array and inside the filter use startsWith() function. But be aware that startsWith is in ES6

StartsWith

var cities = ['Amsterdam', 'Den Haag', 'Den Helder', 'Rotterdam', 'Utrecht', 'Groningen', 'Zoetermeer', 'Zwolle', 'Delft'];

console.log(cities.filter(item => item.startsWith('Den')));

To be compatible with old versions of browsers you can use indexOf() function to compare index.

var cities = ['Amsterdam', 'Den Haag', 'Den Helder', 'Rotterdam', 'Utrecht', 'Groningen', 'Zoetermeer', 'Zwolle', 'Delft'];

console.log(cities.filter(item => item.indexOf('Den') === 0));

edited Feb 20, 2017 at 11:41

answered Feb 20, 2017 at 11:22

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

baao · Accepted Answer · 2017-02-20 11:25:31Z

0

Use startsWith and filter; you can lowerCase the values in there too:

elems.searchField.on('keyup', function(e) {
    return cities.filter(v => v.toLowerCase().startsWith(this.value.toLowerCase())
}

answered Feb 20, 2017 at 11:25

baao

73.5k18 gold badges152 silver badges209 bronze badges

Comments

Saqib Javed · Accepted Answer · 2017-02-20 11:27:23Z

0

use item.contain("Den")

so it will give you any item in which it will finds "den" or you can use item.startswith("Den") to specify only those items which starts with "den"

answered Feb 20, 2017 at 11:27

Saqib Javed

1189 bronze badges

Comments

kind user · Accepted Answer · 2017-02-20 11:33:54Z

0

You can do it also by using RegExp.

var cities = ['Amsterdam', 'Ajax', 'Den Haag', 'Den Helder', 'Denmark', 'Rotterdam', 'Utrecht', 'Groningen', 'Zoetermeer', 'Zwolle', 'Delft'];

function check(arr, query) {
  console.log(cities.filter(v => v.match(new RegExp('^' + query, 'g'))));
}

check(cities, 'Den');
check(cities, 'A');

answered Feb 20, 2017 at 11:33

kind user

42k8 gold badges69 silver badges78 bronze badges

1 Comment

kind user Over a year ago

@erol_smsr Consider upvoting? (:

Collectives™ on Stack Overflow

Search in array, not only unique values

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related