How to find Value in data-attr?

my english is not good, sorry.

I have accented words in the display.
But I want the word to be searched without accents and additional items.

i want find text in data-search=""

I want something like this for data-search:

$(elem+":contains(" + text + ")")

eg.: $("[data-search]:contains(" + text + ")")
(But this does not work very well)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function findElementByText(elem,text) {
    var find = $(elem+":contains(" + text + ")")
        .filter(function(){return $(this).text().replace(/#/i,'');})
        .clone().get();
    return find;

}
$(".searcher").on('keyup change',function(){
$(".result").html('')
  var value=$(this).val().trim().replace(/#/i,'');
  var listItems=".items";
  var found=findElementByText(listItems,value);
  if(found!='')
      $(".result").html(found);
  else
      $(".result").html('<i>Not found!</i>');
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--search:-->
<input class="searcher">
    
    
<ul>    
<!--items:-->
<li class="items" data-search="A-plus">#À plus !</li>
</ul>
   
<!--result:-->
result:<br>
<div class="result"></div>

<!-- end snippet -->

if search À plus, is ok.

if search A-plus, is not found.

i want search A-plus or A or Plus...

Below is an example of an exact search by data-search value:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

function findElementByText(elem, text) {
  const find = $(`${elem}[data-search="${text}"]`);
  if (find.length) {
    return find.clone();
  }
  return '<i>Not found!</i>';
}

$(document).on('input', '.searcher', function() {
  $('.result').html( findElementByText( '.items', $(this).val() ) );
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="searcher">
<ul>    
	<li class="items" data-search="A-plus">#À plus !</li>
</ul>
result:<br>
<div class="result"></div>

<!-- end snippet -->

If you need a fuzzy-search, you can use Fuse.js, or List.js, or some other librarys.

Here is an example of using Fuse.js:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const list = [];

$('.items').each(function() {
  list.push({
    title: $(this).data('search'),
    el: $(this).clone()
  });
});

const fuse = new Fuse(list, {
  shouldSort: false,
  threshold: .5,
  keys: ['title']
});

$(document).on('input', '.searcher', function() {
  const results = fuse.search( $(this).val() );
  $('.result').html('');
  if(results.length) {
    results.map( o => $('.result').append(o.item.el) );
  } else {
    $('.result').html('<i>Not found!</i>');
  }
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
<input class="searcher">
<ul>    
  <li class="items" data-search="A-plus">#À plus !</li>
  <li class="items" data-search="A-minus">#À minus !</li>
</ul>
<br>
result:<br>
<ul class="result"></ul>

<!-- end snippet -->