Challenge Overview

The goal of the challenge is to build a Javascript plugin that mimic the Amazon AWS Search bar functionality.

 

If you have amazon account, you can login to the above page screenshot as follow :

• Open http://aws.amazon.com  

• Use “Sign In To Console” or “AWS Management Console” option from “My Account” drop down to login to the page.

• After successfully login access EC2 management page (i.e. https://console.aws.amazon.com/ec2/v2/home?region=us-east-1)

• Or watch this GIF Screencast to see how to get to the search bar.

Challenge Requirements

You will address the following in this challenge :

• Build a JS plugin that is initialized dynamically to listen to text field to enable auto complete and tagging features.

• We would like the plugin extensible, we need usage API like other plugin (e.g.datepicker) which easy to use. The plugin should at least expose API events/functions when following events happen :

  • On text field focus :

    • developer will override this function to provide key suggestion list.

  • On key selected :

    • developer will override this function to provide list of value suggestion list based on selected key.

  • On text field updated :

    • developer will override this function to receive the tags created in the text field to perform follow up actions (i.e. filtering a table, make call to backend ..etc).

  • What else ? We are open to your creativity here. i.e. things like restyling tags, restyling popup ..etc.

• List of features the plugin should support when interacting with the text field :

  • Display key suggestion popup

    • GIF screenshot.

    • When text field get focus :

      • Execute “on text field focus” event to get list of suggestions.

      • The result format should follow this file format.

        • It has sections i.e. “Fields” and “Metadata”.

        • Each section has array of values. Each value has a “name” field.

      • The result will be rendered as auto complete suggestion popup.

        • Sections will be rendered as header for each section in the popup.

        • “name” field will be rendered as list items of each section.

        • To better understand sections, from GIF screenshot : “Tag Names” and “Resource Attributes” are sections, in sample file it is “Fields” and “Metadata”.

      • The popup content should be scrollable with fixed height.

    • Appearance of key suggestion popup should be toggled by clicking inside the text field.

  • Key suggestion popup filtering.

    • GIF Screenshot.

    • Typing text should filter the popup.

  • Selecting a key from key suggestion popup

    • There are three ways to select a key item from key suggestion popup :

      • Select directly by clicking on key item.

        • GIF Screenshot.

      • Select by using up/down arrows then click “enter” key or “tab” key.

        • GIF Screenshot.

    • When selecting key item from autocomplete popup it will be added to the search text field with “:” character appended.

  • Display value suggestion popup:

    • GIF Screenshot.

    • After key item is selected and added to text field, the plugin should execute “on key selected” event/function to get list of value suggestions, the selected key value should be passed.

    • The result format should follow this file format.

      • It will be array of string values.

      • The array of values will be rendered in auto complete popup.

  • Selecting a value from suggestion popup

    • There are three ways to select a value item from value suggestion popup :

      • Select directly by clicking on item.

        • GIF Screenshot.

      • Select by using up/down arrows then click “enter” key or “tab” key.

        • GIF Screenshot.

    • When selecting value the “Key : Value” will be converted into a tag as shown in the GIF screenshots.

    • Clicking on (x) icon remove the tag.

    • Clicking on the tag will change it back to text mode with value selected, and auto suggestion popup filtered for that selected value.

      • GIF Screenshot.

    • Value can be entered by free typing, clicking enter or tab keys will change it to tags.

    • When a tag is created then “on text field updated” event/function should be executed.

    • Store the tags as key/value array.

    • Key/Value should be unique, so when user try to add another key/value with same values it should not add it as tag.

  • Value suggestion popup filtering.

    • GIF Screenshot.

    • Typing value should filter the value popup.

  • Keyword text without selecting a key

    • GIF Screenshot.

    • A keywords free text can be entered, when clicking “enter” it will add “search :” as key as use the keywords as value.

    • Keywords can have spaces.

  • Multiple tags :

    • GIF Screenshot.

    • Plugin should allow adding multiple tags.

    • Text field height should be adjusted to fit the tags. When text field lose focus the height should be restored with (+N) appended to the text field to represents number of hidden tags.

• We don’t have a design to use for the text field, so designing the suggestion popups and tags is up to your creativity, you will be judged by reviewers for the UI you build.

  • Using bootstrap is acceptable.  (DO NOT USE boostrap, we don't use it in current CSFV website)

Javascript

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

• You are allowed to jQuery for this challenge.

  • AngularJS is not allowed here.

Documentation

The library should follow topcoder documentation standards, so library, functions, instance fields, and in-line comments must be provided. Also a standalone document should be provided with following sections :

• Basic Usage.

• List of Configuration/Options.

• Functions.

• Events.

• .. etc anything useful for developers.

Demo HTML Page

• Build HTML page to demonstrate the functionality of the plugin.

• Add table below the text field to demonstrate the events/functions/api executed/fired based on events occurred in the text field, and what is the input/output for execution.

• The demo should cover all API exposed by the plugin.

Browser Compatibility

• IE9+

• Latest Google Chrome (Windows & Mac OS)

• Latest Safari (Windows & Mac OS)

• Latest Firefox (Windows & Mac OS)

• iPad (Safari & Chrome)

• iPhone (Safari & Chrome)

 

 

Final Submission Guidelines

Deliverable

• All source code that address the requirement with documentation.

• Deployment guide document.