Home > Net >  How do I split a string into an array for list.js and include a search on it?
How do I split a string into an array for list.js and include a search on it?

Time：11-30

How do I split a string into an array for list.js and include a search on it?

For ease of understanding: there is a block, like: <p >1986, 1990, 2001</p>.

In my case, all three values individually should go in the drop-down list and work as a filter. I honestly tried to find something in the documentation, but couldn't.

I tried using different combinations of .split(", "), and found this cumbersome example: https://codepen.io/JasonEspin/pen/bdajKo

Is there a simpler way to get an array with delimiters?

var options = { valueNames: [ 'name', 'born' ] };
var userList = new List('users', options);
  
var updateList = function(){
  var values_date = $(".date_s").val()
  var values_name = $(".name_s").val()
  
  userList.filter(function(item) {
    return (_(values_date).contains(item.values().born) || !values_date) 
           && (_(values_name).contains(item.values().name) || !values_name)
  });
}
                               
$(function(){
  updateList();
  $(".date_s").change(updateList);
  $(".name_s").change(updateList);
  
  var all_born = [];
  var all_name = [];

  _(userList.items).each(function(item){
    all_born.push(item.values().born)
    all_name.push(item.values().name)  
  });
  
  _(all_born).uniq().each(function(item){
    $(".date_s").append('<option value="' item '">'  item  '</option>')
  });
  _(all_name).uniq().each(function(item){
    $(".name_s").append('<option value="' item '">'  item  '</option>')
  }); 
  
  $('select').each(function(){
    $(this).multipleSelect({
      onClick: updateList,
      selectAll: false,
      placeholder: $(this).data('placeholder')
    });
  });
  
});
.list {
  font-family:sans-serif;
  margin:0;
  padding:20px 0 0;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.avatar {
  max-width: 150px;
}
img {
  max-width: 100%;
}
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
p {
  margin:0;
}

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
  margin-bottom:10px
}
input:focus {
  outline:none;
  border-color:#aaa;
}
.sort {
  padding:8px 30px;
  border-radius: 6px;
  border:none;
  display:inline-block;
  color:#fff;
  text-decoration: none;
  background-color: #28a8e0;
  height:30px;
}
.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}
.sort:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:13px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="users">
  <input class="search" placeholder="Search" />
  <select class="date_s" style="width:120px;" data-placeholder="Choose a date">
  </select>
  <select id="multiple-checkboxes" class="name_s" multiple style="width:150px;" data-placeholder="Choose a name">
  </select>
  
  
  <ul class="list">
    <li>
      <h3 class="name">Jonny Wayne</h3>
      <p class="born">1986, 1990, 2001</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985, 2000</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>    
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/multiple-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/[email protected]/dist/multiple-select.min.js"></script>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Assuming the example works, this method is guaranteed to work for the output to the list

instead:

  _(userList.items).each(function (item) {
    all_born.push(item.values().born);
    all_name.push(item.values().name);
  });

Insert this

    _(userList.items).each(function (item) {
    if (item.values().born.indexOf(",") > 0) {
      var arr = item.values().born.split(",");
      all_born = all_born.concat(arr);
    } else {
      all_born.push(item.values().born);
    }
    all_name.push(item.values().name);
  });

or it, which also works, although...

  _(userList.items).each(function(item){
    all_born.push(...item.values().born.split(","))
    all_name.push(item.values().name)  
  });

While I'm looking for a solution to filter the list...

CodePudding user response：

You can either add separated (split()) values to your all_born array

all_born.push(...item.values().born.split(","))

or split the all_born at time of adding to the select, eg:

_(all_born).uniq().each(function(item){
  item.split(",").forEach((i,txt) => 
      $(".date_s").append('<option value="' txt '">'  txt  '</option>')
  );
});

In the filter part, your 'values_date' will only be a single value as it's not multi-select, so you can use vanilla js array.includes(value) to check each item's list of values:

item.values().born.split(", ").includes(values_date)

Updated snippet below.

Added a "blank" entry in date to be able to clear it. Added .sort() so the years appear in a usable order and changed the split to .split(", ") so that the sort works. If you have mixed "," and ", " separators, then you'll either need to split on a regex or trim the values.

Show code snippet

var options = { valueNames: [ 'name', 'born' ] };
var userList = new List('users', options);
  
var updateList = function(){
  var values_date = $(".date_s").val()
  var values_name = $(".name_s").val()
  
  userList.filter(function(item) {
    return (item.values().born.split(", ").includes(values_date) || !values_date) 
           && (_(values_name).contains(item.values().name) || !values_name)
  });
}
                               
$(function(){
  updateList();
  //$(".date_s").change(updateList);
  //$(".name_s").change(updateList);
  
  var all_born = [];
  var all_name = [];

  _(userList.items).each(function(item){
    all_born.push(...item.values().born.split(", "))
    all_name.push(item.values().name)  
  });
  
  _(all_born).uniq().sort().each(function(item){
    $(".date_s").append('<option value="' item '">'  item  '</option>')
  });
  _(all_name).uniq().each(function(item){
    $(".name_s").append('<option value="' item '">'  item  '</option>')
  }); 
  
  $('select').each(function(){
    $(this).multipleSelect({
      onClick: updateList,
      selectAll: false,
      placeholder: $(this).data('placeholder')
    });
  });
  
});
.list {
  font-family:sans-serif;
  margin:0;
  padding:20px 0 0;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.avatar {
  max-width: 150px;
}
img {
  max-width: 100%;
}
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
p {
  margin:0;
}

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
  margin-bottom:10px
}
input:focus {
  outline:none;
  border-color:#aaa;
}
.sort {
  padding:8px 30px;
  border-radius: 6px;
  border:none;
  display:inline-block;
  color:#fff;
  text-decoration: none;
  background-color: #28a8e0;
  height:30px;
}
.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}
.sort:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:13px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="users">
  <input class="search" placeholder="Search" />
  <select class="date_s" style="width:120px;" data-placeholder="Choose a date">
    <option value="">Choose a date</option>
  </select>
  <select id="multiple-checkboxes" class="name_s" multiple style="width:150px;" data-placeholder="Choose a name">
  </select>
    
  <ul class="list">
    <li>
      <h3 class="name">Jonny Wayne</h3>
      <p class="born">1986, 1990, 2001</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985, 2000</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>    
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/multiple-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/[email protected]/dist/multiple-select.min.js"></script>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

In the case that you change your year to be multiple as well, you need to use an "intersects" construct:

return !values_date || item.values().born.split(", ").some(r=>values_date.includes(r))

Note that you should put !values_date first as js evaluates left-to-right and if values_date is null, then having it on the right will give an error.

Updated snippet for multiple years (using "or" as it does with the names).

Show code snippet

var options = { valueNames: [ 'name', 'born' ] };
var userList = new List('users', options);
  
var updateList = function(){
  var values_date = $(".date_s").val()
  var values_name = $(".name_s").val()
  
  userList.filter(function(item) {
    return (!values_date || item.values().born.split(", ").some(r=>values_date.includes(r))) 
           && (!values_name || _(values_name).contains(item.values().name))
  });
}
                               
$(function(){
  updateList();
  //$(".date_s").change(updateList);
  //$(".name_s").change(updateList);
  
  var all_born = [];
  var all_name = [];

  _(userList.items).each(function(item){
    all_born.push(...item.values().born.split(", "))
    all_name.push(item.values().name)  
  });
  
  _(all_born).uniq().sort().each(function(item){
    $(".date_s").append('<option value="' item '">'  item  '</option>')
  });
  _(all_name).uniq().each(function(item){
    $(".name_s").append('<option value="' item '">'  item  '</option>')
  }); 
  
  $('select').each(function(){
    $(this).multipleSelect({
      onClick: updateList,
      selectAll: false,
      placeholder: $(this).data('placeholder')
    });
  });
  
});
.list {
  font-family:sans-serif;
  margin:0;
  padding:20px 0 0;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.avatar {
  max-width: 150px;
}
img {
  max-width: 100%;
}
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
p {
  margin:0;
}

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
  margin-bottom:10px
}
input:focus {
  outline:none;
  border-color:#aaa;
}
.sort {
  padding:8px 30px;
  border-radius: 6px;
  border:none;
  display:inline-block;
  color:#fff;
  text-decoration: none;
  background-color: #28a8e0;
  height:30px;
}
.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}
.sort:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:13px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="users">
  <input class="search" placeholder="Search" />
  <select class="date_s" style="width:120px;" multiple data-placeholder="Choose a date">
    <option value="">Choose a date</option>
  </select>
  <select id="multiple-checkboxes" class="name_s" multiple style="width:150px;" data-placeholder="Choose a name">
  </select>
    
  <ul class="list">
    <li>
      <h3 class="name">Jonny Wayne</h3>
      <p class="born">1986, 1990, 2001</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985, 2000</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>    
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/multiple-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/[email protected]/dist/multiple-select.min.js"></script>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/net/209296.html

Prev:Text won't place above image and is attaching instead
Next:How can I merge columns from two rows into a new row for mobile?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding