javascript - 单击时输入关闭列表，但不应该

Question

我有以下带有过滤器的列表。一切都很好，除了一件烦人的事情——当我点击输入字段时，它关闭了整个列表，不幸的是，我不知道如何解决这个问题，因为我的 javascript 知识很差。

如何保留所有功能，但输入字段在单击时不会关闭列表？

$('.md-select').on('click', function() {
  $(this).toggleClass('active')
})

$('.md-select ul li').on('click', function() {
  var v = $(this).text();
  $('.md-select ul li').not($(this)).removeClass('active');
  $(this).addClass('active');
  $('.md-select label button').text(v)
})

$(document).mouseup(function(e) {
  var container = $(".md-select");

  // if the target of the click isn't the container nor a descendant of the container
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.removeClass('active');
  }
});

var filter = document.getElementById('filter');
var list = document.getElementById('ul-id');
var listItems = list.querySelectorAll('li');

//filter.focus();

filter.addEventListener('keyup', function(e) {
  var val = new RegExp(e.target.value, 'gi');
  for (var i = 0; i < listItems.length; i++) {
    if (e.target.value.length > 0) {
      var text = listItems[i].innerHTML;

      if (!text.match(val)) {
        listItems[i].classList.add('is-hidden');
      } else {
        listItems[i].classList.remove('is-hidden');
      }
    } else {
      listItems[i].classList.remove('is-hidden');
    }

  }
});

.md-select ul::-webkit-scrollbar {
  width: 12px;
}

.md-select ul::-webkit-scrollbar-track {
  -webkit-box-shadow: none !important;
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
  background: #fff;
}

.md-select ul::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
  background: rgb(242, 124, 37) !important;
  height: 30px;
}

.md-select {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  margin: 10px 0 8px 0;
  padding-bottom: 2px;
  max-width: 400px;
  width: 100%;
  z-index: 999;
}

.md-select *,
.md-select :after,
.md-select :before {
  box-sizing: border-box;
}

.md-select [type=button] {
  background: #333;
  color: #fff;
  cursor: default;
  display: block;
  line-height: 48px;
  padding: 2px 0 1px 16px;
  position: relative;
  text-align: left;
  text-shadow: none;
  width: 100%;
  z-index: 1;
  outline: none;
  overflow: hidden;
  border: none;
  border-bottom: 3px solid #000;
}

.md-select.overview [type=button] {
  color: #000;
  border-bottom: 3px solid #f27c25;
}

.md-select.overview ul[role=listbox] {
  border: none;
}

.md-select.overview.active ul {
  border: 2px solid #f27c25;
}

.md-select [type=button]:focus,
.md-select [type=button]:hover {
  background: rgba(0, 0, 0, 0.1);
}

.md-select [type=button]:after {
  content: '\25be';
  float: right;
  padding-right: 16px;
  color: #000;
}

.md-select ul[role=listbox] {
  cursor: default;
  list-style: none;
  line-height: 26px;
  overflow: hidden;
  margin: 0;
  max-height: 0;
  position: absolute;
  padding: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
  width: 100%;
  border: 2px solid #f27c25;
  box-shadow: none !important;
  padding: 0 !important;
}

.md-select ul[role=listbox] li {
  height: 48px;
  margin: 0;
  padding: 10px 16px;
  outline: none;
  overflow: hidden;
  border-bottom: 2px solid #f27c25 !important;
  border-right: 2px solid #f27c25;
  background: #fff;
  z-index: 999;
  position: relative;
  color: #000;
}

.md-select ul[role=listbox] li:nth-last-of-type(1) {
  border-bottom: 0;
}

.md-select ul[role=listbox] li:focus,
.md-select ul[role=listbox] li:hover,
.md-select ul[role=listbox] li.active {
  background: #fff;
}

.md-select.active ul {
  max-height: 240px;
  overflow: auto;
  padding: 8px 0 16px 0px;
  z-index: 2;
  transition: all 0.2s ease;
}

.searchFilter {
  height: 48px;
  margin: 0;
  padding: 10px 16px;
  outline: none;
  overflow: hidden;
  border: 2px solid #f27c25 !important;
  background: #fff;
  z-index: 999;
  position: relative;
  color: #000;
  width: 100%;
  border-left: 0 !important;
}

ul#ul-id li.is-hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="md-select">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <label for="ul-id"><button type="button" class="ng-binding">Choose your country</button></label>
  <ul role="listbox" id="ul-id" class="md-whiteframe-z1" aria-activedescendant="state2_AK" name="ul-id">
    <input type="text" id="filter" class="searchFilter" placeholder="Type to filter" />
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Afghanistan</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Albania</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Algeria</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Andorra</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Angola</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Antigua & Deps</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Argentina</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Armenia</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Australia</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Austria</li>
    </a>
    <a href="h#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Azerbaijan</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bahamas</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bahrain</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bangladesh</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Barbados</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Belarus</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Belgium</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Belize</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Benin</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bhutan</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bolivia</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bosnia Herzegovina</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Botswana</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Brazil</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Brunei</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bulgaria</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Burkina</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Burundi</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Cambodia</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Cameroon</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Canada</li>
    </a>
  </ul>

</div>

Answer 1

您的问题发生是因为 $('.md-select ul li') 的 click 也影响了输入字段，因为 .md-select ul li 是 input 字段的父级。

By using event.stopPropagation(); we are preventing the event of the parent to effect the child element in your case its the input.

这对你有用:

$('#filter').on('click', function(event) {
  event.stopPropagation();
});
$('.md-select').on('click', function() {
  $(this).toggleClass('active')
});

$('.md-select ul li').on('click', function(event) {
  var v = $(this).text();
  $('.md-select ul li').not($(this)).removeClass('active');
  $(this).addClass('active');
  $('.md-select label button').text(v)
})

$(document).mouseup(function(e) {
  var container = $(".md-select");

  // if the target of the click isn't the container nor a descendant of the container
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.removeClass('active');
  }
});

var filter = document.getElementById('filter');
var list = document.getElementById('ul-id');
var listItems = list.querySelectorAll('li');

//filter.focus();

filter.addEventListener('keyup', function(e) {
  var val = new RegExp(e.target.value, 'gi');
  for (var i = 0; i < listItems.length; i++) {
    if (e.target.value.length > 0) {
      var text = listItems[i].innerHTML;

      if (!text.match(val)) {
        listItems[i].classList.add('is-hidden');
      } else {
        listItems[i].classList.remove('is-hidden');
      }
    } else {
      listItems[i].classList.remove('is-hidden');
    }

  }
});

.md-select ul::-webkit-scrollbar {
  width: 12px;
}

.md-select ul::-webkit-scrollbar-track {
  -webkit-box-shadow: none !important;
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
  background: #fff;
}

.md-select ul::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
  background: rgb(242, 124, 37) !important;
  height: 30px;
}

.md-select {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  margin: 10px 0 8px 0;
  padding-bottom: 2px;
  max-width: 400px;
  width: 100%;
  z-index: 999;
}

.md-select *,
.md-select :after,
.md-select :before {
  box-sizing: border-box;
}

.md-select [type=button] {
  background: #333;
  color: #fff;
  cursor: default;
  display: block;
  line-height: 48px;
  padding: 2px 0 1px 16px;
  position: relative;
  text-align: left;
  text-shadow: none;
  width: 100%;
  z-index: 1;
  outline: none;
  overflow: hidden;
  border: none;
  border-bottom: 3px solid #000;
}

.md-select.overview [type=button] {
  color: #000;
  border-bottom: 3px solid #f27c25;
}

.md-select.overview ul[role=listbox] {
  border: none;
}

.md-select.overview.active ul {
  border: 2px solid #f27c25;
}

.md-select [type=button]:focus,
.md-select [type=button]:hover {
  background: rgba(0, 0, 0, 0.1);
}

.md-select [type=button]:after {
  content: '\25be';
  float: right;
  padding-right: 16px;
  color: #000;
}

.md-select ul[role=listbox] {
  cursor: default;
  list-style: none;
  line-height: 26px;
  overflow: hidden;
  margin: 0;
  max-height: 0;
  position: absolute;
  padding: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
  width: 100%;
  border: 2px solid #f27c25;
  box-shadow: none !important;
  padding: 0 !important;
}

.md-select ul[role=listbox] li {
  height: 48px;
  margin: 0;
  padding: 10px 16px;
  outline: none;
  overflow: hidden;
  border-bottom: 2px solid #f27c25 !important;
  border-right: 2px solid #f27c25;
  background: #fff;
  z-index: 999;
  position: relative;
  color: #000;
}

.md-select ul[role=listbox] li:nth-last-of-type(1) {
  border-bottom: 0;
}

.md-select ul[role=listbox] li:focus,
.md-select ul[role=listbox] li:hover,
.md-select ul[role=listbox] li.active {
  background: #fff;
}

.md-select.active ul {
  max-height: 240px;
  overflow: auto;
  padding: 8px 0 16px 0px;
  z-index: 2;
  transition: all 0.2s ease;
}

.searchFilter {
  height: 48px;
  margin: 0;
  padding: 10px 16px;
  outline: none;
  overflow: hidden;
  border: 2px solid #f27c25 !important;
  background: #fff;
  z-index: 999;
  position: relative;
  color: #000;
  width: 100%;
  border-left: 0 !important;
}

ul#ul-id li.is-hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="md-select">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <label for="ul-id"><button type="button" class="ng-binding">Choose your country</button></label>
  <ul role="listbox" id="ul-id" class="md-whiteframe-z1" aria-activedescendant="state2_AK" name="ul-id">
    <input type="text" id="filter" class="searchFilter" placeholder="Type to filter" />
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Afghanistan</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Albania</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Algeria</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Andorra</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Angola</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Antigua & Deps</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Argentina</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Armenia</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Australia</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Austria</li>
    </a>
    <a href="h#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Azerbaijan</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bahamas</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bahrain</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bangladesh</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Barbados</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Belarus</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Belgium</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Belize</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Benin</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bhutan</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bolivia</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bosnia Herzegovina</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Botswana</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Brazil</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Brunei</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Bulgaria</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Burkina</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Burundi</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Cambodia</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Cameroon</li>
    </a>
    <a href="#">
      <li role="option" id="" class="ng-binding ng-scope" tabindex="-1" aria-selected="false">Canada</li>
    </a>
  </ul>

</div>