How to find Value in data-attr?

Question

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)

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>');
});

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

if search À plus, is ok.

if search A-plus, is not found.

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

Does this answer your question? [How can I get the data-id attribute?](https://stackoverflow.com/questions/5309926/how-can-i-get-the-data-id-attribute) — hassan, May 28 '23 at 09:58
You can use `element.dataSet.seach` or `element.getAttribute("data-search")` where element is a dom node — Ahmed Abdelbaset, May 28 '23 at 10:02

imhvost · Accepted Answer · 2023-05-28T15:41:42.253

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

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() ) );
});

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

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:

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>');
  }
});

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

Thanks a lot. Maybe I didn't ask my question correctly. I want to find Items if something similar is searched. Your answer is for the exact same word. i want search A-plus or A or Plus... — ramin, May 28 '23 at 13:22

How to find Value in data-attr?

1 Answers1