0

estou com dificuldades para fazer esse option funcionar, gostaria que quando o usuário selecionasse a cidade listasse exatamente como é feito com o nome e ano, alguem consegue me ajudar?

var options = {
  valueNames: [ 'name', 'born','city' ]
};

var userList = new List('users', options);
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">

  <input class="search" placeholder="Search" />
  	<select >
		<option> 	</option>
		<option value="">Roma</option>
		<option value="">London</option>
		</select>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
	   <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
	  <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
	  <p class="city">London</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
	   <p class="city">London</p>
    </li>
  </ul>

</div>

1
  • Documentação da biblioteca utilizada no código: listjs.com
    – bfavaretto
    Commented 22/12/2017 às 14:00

2 Respostas 2

0

Segue um exemplo utilizando JQuery para adicionar o filtro ao seu select.

var options = {
  valueNames: [ 'name', 'born','city' ]
};

var userList = new List('users', options);

$(".cityFilter").on('change',function(){
  
  var filtro = $(this).val()
  
  if(filtro == "")
  {
    userList.filter();
  }
  else
  {
    userList.filter(function(item) {
      if (item.values().city == filtro) {
        return true;
      } 
      else
      {
        return false;
      }
    });
  } 
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">

  <input class="search" placeholder="Search" data-sort="name" />
  	<select class="cityFilter" data-sort="city" >
		<option> 	</option>
		<option value="Roma">Roma</option>
		<option value="London">London</option>
		</select>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
	   <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
	  <p class="city">Roma</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
	  <p class="city">London</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
	   <p class="city">London</p>
    </li>
  </ul>

</div>

1
  • Cara, funcionou certinho muito obrigado mesmo! :)
    – user99842
    Commented 22/12/2017 às 15:20
-1

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
    }
}

Você deve fazer log-in para responder a esta pergunta.