Uma opção em javascript seria incluindo um button.
Exemplo no codepen
html:
<div id="users">
<input id="search" class="search" placeholder="Search" data-sort="name" />
<select id="select" class="cityFilter" data-sort="city">
<option> </option>
<option value="Roma">Roma</option>
<option value="London">London</option>
</select>
<button onclick="handleSearch()">Search</button>
<div id="root"></div>
</div>
<div id="root"></div>
javascript:
const options = [
{
id: 0,
name: 'Jonny Stromberg',
born: '1986',
city: 'Roma',
},
{
id: 1,
name: 'Jonas Arnklint',
born: '1985',
city: 'Roma'
},
{
id: 2,
name: 'Martina Elm',
born: '1986',
city: 'London',
},
{
id: 3,
name: 'Gustaf Lindqvist',
born: '1983',
city: 'London',
}
]
let option = ''
let select = ''
view()
function view() {
option = document.getElementById('options')
const resp = options.map(e => (
`
<ul class="list">
<li>
<h3 class="name">${e.name}</h3>
<p class="born">${e.born}</p>
<p class="city">${e.city}</p>
</li>
</ul>
`
))
document.getElementById('root').innerHTML = resp
}
function handleSearch() {
option = document.getElementById('search').value
select = document.getElementById('select').value
let restSearch = []
let resp = ''
options.forEach((f, index) => {
if (option && !select) {
f.name.includes(option) && restSearch.push(options.filter(e => e.id === index))
f.born.includes(option) && restSearch.push(options.filter(e => e.id === index))
f.city.includes(option) && restSearch.push(options.filter(e => e.id === index))
} else if (!option && select) {
f.name.includes(select) && restSearch.push(options.filter(e => e.id === index))
f.born.includes(select) && restSearch.push(options.filter(e => e.id === index))
f.city.includes(select) && restSearch.push(options.filter(e => e.id === index))
} else {
if (f.name.includes(option) || f.name.includes(select)) {
restSearch.push(options.filter(e => e.id === index))
} else if (f.born.includes(option) || f.born.includes(select)) {
restSearch.push(options.filter(e => e.id === index))
} else if (f.city.includes(option) || f.city.includes(select)) {
restSearch.push(options.filter(e => e.id === index))
}
}
})
if (restSearch.length) {
restSearch.forEach(e => {
e.forEach(x => {
resp += `
<ul class="list">
<li>
<h3 class="name">${x.name}</h3>
<p class="born">${x.born}</p>
<p class="city">${x.city}</p>
</li>
</ul>
`
})
})
document.getElementById('root').innerHTML = resp
}
}