How to limit char length in bootstrap live search-CodePudding

How to add maxlenght to bootstraps bs-searchbox.

<html>

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
</head>

<div >

  <div >
    <select  data-show-subtext="true" data-live-search="true">
      <option data-subtext="Rep California">Tom Foolery</option>
      <option data-subtext="Sen California">Bill Gordon</option>
      <option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
      <option data-subtext="Rep Alabama">Mario Flores</option>
      <option data-subtext="Rep Alaska">Don Young</option>
      <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
    </select>
  </div>
</div>
   <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

</html>

CodePudding user response：

You are using an old version of bootstrap-select besides being vulnerable to various attacks it is quite out of date, updating it you can use the loading event and use maxlength for your purpose.

Example with maxlength = 6

$('.selectpicker').selectpicker().on('loaded.bs.select', function (e, clickedIndex, isSelected, previousValue) {
  $(this).parent().find('.dropdown-menu > .bs-searchbox > input').attr('maxlength','6');
});

<html>

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
</head>

<div >

  <div >
    <select  data-show-subtext="true" data-live-search="true">
      <option data-subtext="Rep California">Tom Foolery</option>
      <option data-subtext="Sen California">Bill Gordon</option>
      <option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
      <option data-subtext="Rep Alabama">Mario Flores</option>
      <option data-subtext="Rep Alaska">Don Young</option>
      <option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
    </select>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

</html>