How to use javascript to filter a large list by html attribute value

Question

I'm trying to make a reference guide for a mixture of many html icons. I have the following html code:

<input id="search" type="text" placeholder="Search Icons">
<input id="submit" type="button" value="Submit!">
<input id="cancel" type="button" value="Cancel">
<div id="icon-list">
    <li>
        <div class="icon icon-name"></div>
        <input type="text" readonly="readonly" value="name">
    </li>
    <li>
        <div class="icon icon-name2"></div>
        <input type="text" readonly="readonly" value="name2">
    </li>
    <li>
        <div class="icon icon-name3"></div>
        <input type="text" readonly="readonly" value="name3">
    </li>
    <!-- repeated 100 or more times -->
</div>

I'd like to be able to filter out the icons(<li>) based on the value attribute of the input inside it, preferably using fuzzy search. Is there a library or some code that can do this for me?

EDIT: I'd like to know mainly how to implement the search from the value of the value attribute, not how to implement the fuzzy search. Example:

you want a fuzzy matching with the value? how fuzzy? regex-fuzzy? or is there another fuzzier fuzzy? — le_m
– le_m, Commented Jun 15, 2016 at 4:55
Not that fuzzy. Just fuzzy enough so that misspellings will still work. Maybe only 1 or 2 letters are wrong? for example, I want safe to still show if the user searches for sfae — jeffkmeng
– jeffkmeng, Commented Jun 15, 2016 at 4:59
Levenshtein might be what you need: stackoverflow.com/questions/11919065/… — le_m
– le_m, Commented Jun 15, 2016 at 5:03
@le_m the problem is I don't know how to get the array of what to search. — jeffkmeng
– jeffkmeng, Commented Jun 15, 2016 at 5:14
Best solution would be to have a hashmap/array with all your icon/names as well as an input element. As soon as you type, the result list is build by searching through the hashmap/array according to the linked question. You can then easily generate a html structure from the results as you did above. — le_m
– le_m, Commented Jun 15, 2016 at 5:17

user01 · Accepted Answer · 2016-06-15 06:34:40Z

2

If all you're interested in is filtering the lis based on the value in the input, that can be done many, many ways. I threw something together with jQuery, but anything with a view layer, like React or Angular, could manage. Fuzzy searches aren't terribly well defined, but the Fuse.js does some kind of fuzzy search. I plugged it in.

For about a 100, you could probably get away with a similar implementation like below (there's a lot of efficiency that can be picked up with all the jQuery calls).

var liElements = $.makeArray($('#icon-list li').map(function(idx, elm) {
  var jElm = $(elm);
  var value = jElm.find('input').attr('value');
  return {
    jElm, value
  };
}));
var fuse = new Fuse(liElements, {
  keys: ["value"],
  threshold: 0.2
});

var search = $('#search');
var filter = function() {
  var target = search.val().trim();
  if (target.length < 1) {
    liElements.forEach(function(obj) {
      obj.jElm.show();
    });
    return;
  }
  var results = fuse.search(target);

  liElements.forEach(function(obj) {
    obj.jElm.hide();
  });
  results.forEach(function(obj) {
    obj.jElm.show();
  });
};


search.keyup(filter);
$('#submit').click(filter);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/2.2.0/fuse.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="search" type="text" placeholder="Search Icons">
<input id="submit" type="button" value="Submit!">
<input id="cancel" type="button" value="Cancel">
<div id="icon-list">
  <li>
    <div class="icon icon-name"></div>
    <input type="text" readonly="readonly" value="teal">
  </li>
  <li>
    <div class="icon icon-name2"></div>
    <input type="text" readonly="readonly" value="mittens">
  </li>
  <li>
    <div class="icon icon-name3"></div>
    <input type="text" readonly="readonly" value="mittons">
  </li>
  <!-- repeated 100 or more times -->
</div>

answered Jun 15, 2016 at 6:34

user01

9117 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

1983 Over a year ago

Maybe replace the shorthand property names object initialiser with the regular long form, for browser compatibility.

1983 Over a year ago

Library recommendations are off-topic and you don't need jQuery. However, +1 for clearly demonstrating the mechanics of a straightforward solution.

user01 Over a year ago

@FIzzyTea Agreed, you certainly don't need jQuery, but it was late and it saved me a couple of lines. And same goes for the shorthand init. jQuery or not, this design is pretty rough on the DOM and could (should, for production) be improved quite a bit. Purely a conceptual demo.

1983 Over a year ago

Agreed, you shouldn't be storing data in the DOM at all.

Collectives™ on Stack Overflow

How to use javascript to filter a large list by html attribute value

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related