How I Made a Web Form That Suggests Skills Using AI + JavaScript

#webdev #javascript #beginners #ai

Modern users expect more than just input fields—they expect guidance, personalization, and efficiency. So I decided to explore how we could use AI to make web forms smarter, specifically by suggesting relevant skills based on user input.

In this post, I’ll walk through how we added a lightweight AI layer on top of a typical HTML/JS form, using a language model to dynamically suggest skills as a user types their job title or description.

🔍 The Idea

What if your form could suggest skills like this:

User enters: Frontend Developer
Suggested Skills: JavaScript, React, CSS, Responsive Design

We made this work by:

Capturing input events in JS
Sending them to an API powered by a language model
Injecting suggested skills back into the DOM

⚙️ How It Works (High-Level)

Input Monitoring

document.querySelector('#job-title').addEventListener('input', (e) => {
  fetchSuggestions(e.target.value);
});

Call to AI Model (LLM API)

async function fetchSuggestions(input) {
  const res = await fetch('/suggest-skills?title=' + input);
  const skills = await res.json();
  updateUI(skills);
}

Update the Form

function updateUI(skills) {
  const list = document.querySelector('#suggested-skills');
  list.innerHTML = skills.map(s => `<li>${s}</li>`).join('');
}

Why This Matters

This isn't just a cool trick — it's an example of practical AI UX. Forms can now guide users rather than passively collect data.