UI 01: Autocomplete Implementation Using Javascript, HTML, and CSS

When we are using Google and typing part of the keyword to search, Google will guess what we want to search. On one hand, this will bring convenience to customers and improve user experience. On the other hand, Google can present more precise recommandations.

No matter what advanced algorithm we can use in backend, when it comes to frontend, many existing stable modules can be used to implement autocomplete. But in this article, we will implement one ourselves.

Let’s figure out what our goal is and handle them one by one.

• A clean input
• Display dynamic recommendations after any typing and hide recommendations when blur
• Autofill after clicking any recommendations

• UI 01: Autocomplete Implementation using Javascript, Html, CSS
• UI 02: Checkbox Implementation using Pseudo-Classes and Pseudo-Elements
• UI 03: Clock and Charts Implementation using svg and animation
• UI 04: Modal Implementation using position, z-index
• UI 05: Carousel Implementation using transform and transition
• UI 06: Masonry Implementation using flex and grid
• UI 07: Photo Collaging using Drag and Drop
• UI 08: Stick Paragraph, Table Header and Component using position: sticky
• UI 09: Card with Web Components: ShadowDOM, Custom Elements and Template/Slot

1. A clean input

Simple, just add an input . Remember to make it larger so that users can locate where to input immediately.

Fantastic!

2. Display dynamic recommendations after any typing and hide recommendations when blur

Don’t panic, before making the recommendations vivid, let’s just add static ones! So what should we expect?

• Recommendation items should be displayed just below the input element
• Recommendation items should be covered on the top of the results part
• Recommendation items should be emphasized when hovering

To achieve this, just add a div after input, and make its position absolute . And add a special background-color to the :hover ones.

Now, let’s make it dynamic! To make things simple, we use constant candidate words. And still there are several things we need to do:

• When input ’s content changes, match within available recommendations and replace with filtered ones — use onfocus event to monitor the change
• When the user focus leaves, hide recommendations — use onblur event

So why don’t we just use onchange instead? Because sometimes onchange won’t be triggered if you’re still focusing on the input element, which can be really unpredictable and annoying. To make autocomplete function works fluently, we use onfocus and set a timer to do this.

And bind events in HTML:

Here is the result:

It works!

3 Autofill after clicking any recommendations

Now the final step: recommendations should be clickable. The quickest way to do so is to bind the click event helperSelectOne when the recommendation items are added:

But it seems not work at all, even the console logs are not printed. Why? Let’s review the logic again.

i. Type part of the keywords

ii. Dynamically add recommendations

iii. Click one of the recommendations

Oh! Before iii, we just lose focus of the input! And no event will be triggered! Let’s verify this by removing the blur event from the input element:

<input class="search-input" type="text" onfocus="AutoCompletionStart()"/>

And it works! But another problem occurs that the recommendation items won’t hide when we leave this input.

To solve this problem, we would apply a tricky operation: put a delay between blur and hide so that the suggestion items and related items still exists for a short time even when blur is triggered.

4. Enhancement

As you may notice, there are many places we can enhance. For example, what if the input’s content doesn’t change? Timer will still be running which wastes valuable CPU time. Here we can add a cache value to hold the previous value. If the value doesn’t change, just ignore this time.

Where is the code?

brianshen1990/KeepLearning

What is this place ? Chisingtan Scenic Area, Huailian, Taiwan