Posted in jquery
4
8:27 am, February 3, 2021

jquery page search [testing]

just testing this one at the moment for a in page search. 

Based on this: https://codepen.io/chriscoyier/pen/ExgqWab 

I would like to adapt this code to search through page elements and maybe highlight them somehow. 

* not currently working

HTML

<h1>Quicksearch</h1>
<input id="filter-input" placeholder="Type in here to filter results" type="search"/>
<ol id="filter-results">
  <li>Bob</li>
  <li>Smith</li>
  <li>Moo</li>
  <li>Test Space</li>
</ol>

Javascript

$.expr[":"].CIcontains = $.expr.createPseudo(function (arg) {
  return function (elem) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

// Every time a key is clicked
$("#filter-input").keyup(function () {
  // get the text from the box
  var curr_text = $(this).val();
  // pass it to the function
  filterResults(curr_text);
});

$("#close").click(function () {
  var curr_text = $(this).val();
  $("#filter-input").val("");
  filterResults(curr_text);
});

function filterResults(curr_text) {
  // hide all results
  $("#filter-results li").hide();
  // ... except those which are selected
  $("#filter-results li:CIcontains('" + curr_text + "')").show();
}

Quicksearch

  1. Bob
  2. Smith
  3. Moo
  4. Test Space

View Statistics
This Week
24
This Month
90
This Year
0

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote
Be Yourself, Back Yourself
Kristie Bennett, Survivor