Let's see how to filter the device contacts when the user starts to type a contact name in a text input. Actually the filter will return only the contacts that have one or more e-mail addresses in order to let the user add a trip mate as a contact with whom to share the trip details.
Return to the project you created in the previous example and open the
index.htmlfile, and add anotherdatalisttag for thetripMateinput field:<datalist id='typedTripmates'> <!-- Dynamically content here --> </datalist>Open the
index.jsfile you already worked on and add a listener for the input event on thetripMateinput field:var tripMate = document.querySelector('#tripmate'), tripMate.addEventListener('input', onTripmateChange);Define the
onTripmateChangefunction and in its body clear and start an interval (stored in thedelayedFindvariable) in order to call thefindmethod only when the user stops typing:if(delayedFind){ clearInterval...