Active Search

+++ title = "Active Search" template = "demo.html" +++

This example actively searches a contacts database as the user enters text.

We start with a search input and an empty table:

The input issues a POST to /search on the input event and sets the body of the table to be the resulting content.

We add the delay:500ms modifier to the trigger to delay sending the query until the user stops typing. Additionally, we add the changed modifier to the trigger to ensure we don't send new queries when the user doesn't change the value of the input (e.g. they hit an arrow key, or pasted the same value).

We can use multiple triggers by separating them with a comma, this way we add 2 more triggers:

• keyup[key=='Enter'] triggers once enter is pressed. We use event filters here to check for the key property in the KeyboardEvent object.
• load in order to show all results initially on load.

Finally, we show an indicator when the search is in flight with the hx-indicator attribute.

{{ demoenv() }}

<script> //========================================================================= // Fake Server Side Code //========================================================================= // routes init("/init", function(request, params){ return searchUI(); }); onPost(/\/search.*/, function(request, params){ var search = params['search']; var contacts = dataStore.findContactsMatching(search); return resultsUI(contacts); }); // templates function searchUI() { return ` <h3> Search Contacts <span class="htmx-indicator"> Searching... </span> </h3> <input class="form-control" type="search" name="search" placeholder="Begin Typing To Search Users..." hx-post="/search" hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load" hx-target="#search-results" hx-indicator=".htmx-indicator"> <table class="table"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tbody id="search-results"> </tbody> </table>`; } function resultsUI(contacts){ var txt = ""; for (var i = 0; i < contacts.length; i++) { var c = contacts[i]; txt += "<tr><td>" + c.FirstName + "</td><td>" + c.LastName + "</td><td>" + c.Email + "</td></tr>\n"; } return txt; } //datastore var dataStore = function(){ var data = [ { "FirstName": "Venus", "LastName": "Grimes", "Email": "[email protected]", "City": "Ankara" }, { "FirstName": "Fletcher", "LastName": "Owen", "Email": "[email protected]", "City": "Niort" }, { "FirstName": "William", "LastName": "Hale", "Email": "[email protected]", "City": "Te Awamutu" }, { "FirstName": "TaShya", "LastName": "Cash", "Email": "[email protected]", "City": "Titagarh" }, { "FirstName": "Kevyn", "LastName": "Hoover", "Email": "[email protected]", "City": "Cuenca" }, { "FirstName": "Jakeem", "LastName": "Walker", "Email": "[email protected]", "City": "St. Andrä" }, { "FirstName": "Malcolm", "LastName": "Trujillo", "Email": "[email protected]", "City": "Fort Resolution" }, { "FirstName": "Wynne", "LastName": "Rice", "Email": "[email protected]", "City": "Kinross" }, { "FirstName": "Evangeline", "LastName": "Klein", "Email": "[email protected]", "City": "San Giovanni in Galdo" }, { "FirstName": "Jennifer", "LastName": "Russell", "Email": "[email protected]", "City": "Laives/Leifers" }, { "FirstName": "Rama", "LastName": "Freeman", "Email": "[email protected]", "City": "Flin Flon" }, { "FirstName": "Jena", "LastName": "Mathis", "Email": "[email protected]", "City": "Fort Simpson" }, { "FirstName": "Alexandra", "LastName": "Maynard", "Email": "[email protected]", "City": "Nazilli" }, { "FirstName": "Tallulah", "LastName": "Haley", "Email": "[email protected]", "City": "Bay Roberts" }, { "FirstName": "Timon", "LastName": "Small", "Email": "[email protected]", "City": "Girona" }, { "FirstName": "Randall", "LastName": "Pena", "Email": "[email protected]", "City": "Edam" }, { "FirstName": "Conan", "LastName": "Vaughan", "Email": "[email protected]", "City": "Nadiad" }, { "FirstName": "Dora", "LastName": "Allen", "Email": "[email protected]", "City": "Renfrew" }, { "FirstName": "Aiko", "LastName": "Little", "Email": "[email protected]", "City": "Delitzsch" }, { "FirstName": "Jessamine", "LastName": "Bauer", "Email": "[email protected]", "City": "Offida" }, { "FirstName": "Gillian", "LastName": "Livingston", "Email": "[email protected]", "City": "Saskatoon" }, { "FirstName": "Laith", "LastName": "Nicholson", "Email": "[email protected]", "City": "Tallahassee" }, { "FirstName": "Paloma", "LastName": "Alston", "Email": "[email protected]", "City": "Cache Creek" }, { "FirstName": "Freya", "LastName": "Dunn", "Email": "[email protected]", "City": "Heist-aan-Zee" }, { "FirstName": "Griffin", "LastName": "Rice", "Email": "[email protected]", "City": "Montpelier" }, { "FirstName": "Catherine", "LastName": "West", "Email": "[email protected]", "City": "Tarnów" }, { "FirstName": "Jena", "LastName": "Chambers", "Email": "[email protected]", "City": "Konya" }, { "FirstName": "Neil", "LastName": "Rodriguez", "Email": "[email protected]", "City": "Kraków" }, { "FirstName": "Freya", "LastName": "Charles", "Email": "[email protected]", "City": "Arzano" }, { "FirstName": "Anastasia", "LastName": "Strong", "Email": "[email protected]", "City": "Polpenazze del Garda" }, { "FirstName": "Bell", "LastName": "Simon", "Email": "[email protected]", "City": "Caxias do Sul" }, { "FirstName": "Minerva", "LastName": "Allison", "Email": "[email protected]", "City": "Rio de Janeiro" }, { "FirstName": "Yoko", "LastName": "Dawson", "Email": "[email protected]", "City": "Saint-Remy-Geest" }, { "FirstName": "Nadine", "LastName": "Justice", "Email": "[email protected]", "City": "Calgary" }, { "FirstName": "Hoyt", "LastName": "Rosa", "Email": "[email protected]", "City": "Mold" }, { "FirstName": "Shafira", "LastName": "Noel", "Email": "[email protected]", "City": "Kitzbühel" }, { "FirstName": "Jin", "LastName": "Nunez", "Email": "[email protected]", "City": "Dreieich" }, { "FirstName": "Barbara", "LastName": "Gay", "Email": "[email protected]", "City": "Overland Park" }, { "FirstName": "Riley", "LastName": "Hammond", "Email": "[email protected]", "City": "Smoky Lake" }, { "FirstName": "Molly", "LastName": "Fulton", "Email": "[email protected]", "City": "Montese" }, { "FirstName": "Dexter", "LastName": "Owen", "Email": "[email protected]", "City": "Bousval" }, { "FirstName": "Kuame", "LastName": "Merritt", "Email": "[email protected]", "City": "Solingen" }, { "FirstName": "Maggie", "LastName": "Delgado", "Email": "[email protected]", "City": "Tredegar" }, { "FirstName": "Hanae", "LastName": "Washington", "Email": "[email protected]", "City": "Amersfoort" }, { "FirstName": "Jonah", "LastName": "Cherry", "Email": "[email protected]", "City": "Acciano" }, { "FirstName": "Cheyenne", "LastName": "Munoz", "Email": "[email protected]", "City": "Saint-L?onard" }, { "FirstName": "India", "LastName": "Mack", "Email": "[email protected]", "City": "Maryborough" }, { "FirstName": "Lael", "LastName": "Mcneil", "Email": "[email protected]", "City": "Livorno" }, { "FirstName": "Jillian", "LastName": "Mckay", "Email": "[email protected]", "City": "Salvador" }, { "FirstName": "Shaine", "LastName": "Wright", "Email": "[email protected]", "City": "Newton Abbot" }, { "FirstName": "Keane", "LastName": "Richmond", "Email": "[email protected]", "City": "Canterano" }, { "FirstName": "Samuel", "LastName": "Davis", "Email": "[email protected]", "City": "Peterhead" }, { "FirstName": "Zelenia", "LastName": "Sheppard", "Email": "[email protected]", "City": "Motta Visconti" }, { "FirstName": "Giacomo", "LastName": "Cole", "Email": "[email protected]", "City": "Donnas" }, { "FirstName": "Mason", "LastName": "Hinton", "Email": "[email protected]", "City": "St. Asaph" }, { "FirstName": "Katelyn", "LastName": "Koch", "Email": "[email protected]", "City": "Cleveland" }, { "FirstName": "Olga", "LastName": "Spencer", "Email": "[email protected]", "City": "Karapınar" }, { "FirstName": "Erasmus", "LastName": "Strong", "Email": "[email protected]", "City": "Passau" }, { "FirstName": "Regan", "LastName": "Cline", "Email": "[email protected]", "City": "Pergola" }, { "FirstName": "Stone", "LastName": "Holt", "Email": "[email protected]", "City": "Houston" }, { "FirstName": "Deanna", "LastName": "Branch", "Email": "[email protected]", "City": "Olcenengo" }, { "FirstName": "Rana", "LastName": "Green", "Email": "[email protected]", "City": "Onze-Lieve-Vrouw-Lombeek" }, { "FirstName": "Caryn", "LastName": "Henson", "Email": "[email protected]", "City": "Kington" }, { "FirstName": "Clarke", "LastName": "Stein", "Email": "[email protected]", "City": "Tenali" }, { "FirstName": "Kelsie", "LastName": "Porter", "Email": "[email protected]", "City": "İskenderun" }, { "FirstName": "Cooper", "LastName": "Pugh", "Email": "[email protected]", "City": "Delhi" }, { "FirstName": "Paul", "LastName": "Spencer", "Email": "[email protected]", "City": "Biez" }, { "FirstName": "Cassady", "LastName": "Farrell", "Email": "[email protected]", "City": "New Maryland" }, { "FirstName": "Sydnee", "LastName": "Velazquez", "Email": "[email protected]", "City": "Strée" }, { "FirstName": "Felix", "LastName": "Boyle", "Email": "[email protected]", "City": "Edinburgh" }, { "FirstName": "Ryder", "LastName": "House", "Email": "[email protected]", "City": "Copertino" }, { "FirstName": "Hadley", "LastName": "Holcomb", "Email": "[email protected]", "City": "Avadi" }, { "FirstName": "Marsden", "LastName": "Nunez", "Email": "[email protected]", "City": "New Galloway" }, { "FirstName": "Alana", "LastName": "Powell", "Email": "[email protected]", "City": "Pitt Meadows" }, { "FirstName": "Dennis", "LastName": "Wyatt", "Email": "[email protected]", "City": "Wrexham" }, { "FirstName": "Karleigh", "LastName": "Walton", "Email": "[email protected]", "City": "Diksmuide" }, { "FirstName": "Brielle", "LastName": "Donovan", "Email": "[email protected]", "City": "Kolmont" }, { "FirstName": "Donna", "LastName": "Dickerson", "Email": "[email protected]", "City": "Vallepietra" }, { "FirstName": "Eagan", "LastName": "Pate", "Email": "[email protected]", "City": "Durness" }, { "FirstName": "Carlos", "LastName": "Ramsey", "Email": "[email protected]", "City": "Tiruvottiyur" }, { "FirstName": "Regan", "LastName": "Murphy", "Email": "[email protected]", "City": "Candidoni" }, { "FirstName": "Claudia", "LastName": "Spence", "Email": "[email protected]", "City": "Augusta" }, { "FirstName": "Genevieve", "LastName": "Parker", "Email": "[email protected]", "City": "Forbach" }, { "FirstName": "Marshall", "LastName": "Allison", "Email": "[email protected]", "City": "Landau" }, { "FirstName": "Reuben", "LastName": "Davis", "Email": "[email protected]", "City": "Schönebeck" }, { "FirstName": "Ralph", "LastName": "Doyle", "Email": "[email protected]", "City": "Linkebeek" }, { "FirstName": "Constance", "LastName": "Gilliam", "Email": "[email protected]", "City": "Enterprise" }, { "FirstName": "Serina", "LastName": "Jacobson", "Email": "[email protected]", "City": "Hérouville-Saint-Clair" }, { "FirstName": "Charity", "LastName": "Byrd", "Email": "[email protected]", "City": "Brussegem" }, { "FirstName": "Hyatt", "LastName": "Bird", "Email": "[email protected]", "City": "Gdynia" }, { "FirstName": "Brent", "LastName": "Dunn", "Email": "[email protected]", "City": "Hay-on-Wye" }, { "FirstName": "Casey", "LastName": "Bonner", "Email": "[email protected]", "City": "Kearny" }, { "FirstName": "Hakeem", "LastName": "Gill", "Email": "[email protected]", "City": "Portico e San Benedetto" }, { "FirstName": "Stewart", "LastName": "Meadows", "Email": "[email protected]", "City": "Dignano" }, { "FirstName": "Nomlanga", "LastName": "Wooten", "Email": "[email protected]", "City": "Troon" }, { "FirstName": "Sebastian", "LastName": "Watts", "Email": "[email protected]", "City": "Palermo" }, { "FirstName": "Chelsea", "LastName": "Larsen", "Email": "[email protected]", "City": "Poole" }, { "FirstName": "Cameron", "LastName": "Humphrey", "Email": "[email protected]", "City": "Manfredonia" }, { "FirstName": "Juliet", "LastName": "Bush", "Email": "[email protected]", "City": "Lavacherie" }, { "FirstName": "Caryn", "LastName": "Hooper", "Email": "[email protected]", "City": "Amelia" } ]; return { findContactsMatching : function(str) { var result = []; var s = str.toLowerCase(); for (var i = 0; i < data.length; i++) { var c = data[i]; if(c['FirstName'].toLowerCase().indexOf(s) >= 0 || c['LastName'].toLowerCase().indexOf(s) >= 0 || c['Email'].toLowerCase().indexOf(s) >= 0) { result.push(c) } } return result; } } }() </script>