Request Dev Services »

theDevTip.com / 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) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input#fill');
                      $('span#explode').fadeIn();
                    }, 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.

<ul>
    <li>JavaScript</li>
    <li>Angular.js</li>
</ul>

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

    $('.start').fadeOut("slow");
    $('.start_mobi').fadeOut("slow");
    $('input#fill').fadeOut("slow");
    $('span.general').hide();        
    $('.sup').fadeOut("slow");

    setTimeout(function(){
      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');
      $('h1.luck').fadeIn("slow");
      $('img.lucky').fadeIn("fast");
      $('.footer').fadeIn("slow");
      $('#explode2').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
avatar