Request Dev Services » / Notes /

Interactive Angular auto-fill with fun results (JS front-end demo)

Using JS and Angular this is how we accomplish the input drop-down autofill functionality.  You’ll see I’m getting the input value, then I’m storing the auto-complete values in an array style format.  To add some fun animation, I created a submit button next to my auto-complete input field, upon clicking or submitting it I make it ‘explode’, then trigger some fun animations with jQuery.

// Adspace available! //
var input = $("input#fill").val(); // allows later use

function DefaultCtrl($scope) {
$scope.names = ["Website Developer", "Web Application Developer", "Front-End Web Developer", "Full-Stack Web Developer", "UI Developer", "HTML5", "CSS3", "SASS", "JavaScript", "jQuery", "PHP", "Wordpress CMS Developer", "Angular.js", "Responsive Designer", "Web Designer", "Unix friendly", "Cross Browser", "Cross Device", "Progressive Developer", "Taco A/B tester", "Performance Optimizer", "Web Guru", "Dev Recruiting", "Git commander", "CSS Destroyer", "Bug Annihilator", "Web Consultant", "JS Analytics"];
angular.module('MyModule', []).directive('autoComplete', function($timeout) {
    return function(scope, iElement, iAttrs) {
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                    }, 0);

Note: The browser is basically rendering my JS array items above into an unordered list in the HTML output. Good to know when styling.


FYI: What if I wanted to use dynamic data instead of creating and defining an array of content? Use array.push()

Sample use-case scenario:

$scope.myItems.push(services[index++ % services.length]);

Fun extra stuff with additional animations: Upon click or submission of the autocomplete input field, I make the submit button explode, then hide the auto-fill input field just used, and show new content. (jQuery)

$("#explode").click(function() {

    $(this).hide("explode", {pieces: 200}, 1000); // make button explode


      var input = $("input#fill").val();
      $(".main_contain").prepend('<div class="item">Coincidentally, I am a <span class="blank">' + input + '</span> person named <span class="">Cameron</span>.</div>').fadeIn('slow');
    }, 2000);
    return false;    

In this line, I am using the users inserted text from our auto-complete field from our created input variable (var input …)

<div class="item">Coincidentally, I am a <span class="blank">' + input + '</span>

See it come together in the full demo!

About the Author
Cameron Cashwell Web Developer
I build websites, web apps, and software. Wanna work together? Let's chat about your project!

Leave a Reply

Be the First to Comment!

Notify of