How to Make a Flat Styled jQuery UI Combo Box Widget (Part 2)

How to Make a Flat Styled jQuery UI Combo Box Widget (Part 2)

Designmodo user interface kits are a great starting place for a number of projects, including the framework for a variety of widgets that work great with a little jQuery help.

In this video, developer David East uses follows up on ways to use the combo box you used in Part 1 of this video series. He explains how to take your box and give the widget some additional functionality, such autocomplete.

The widget will feature flat styling and works with parts from Designmodo’s Square UI kit.

This step-by-step tutorial is easy to follow and you can watch it while working on your own combo box. It is recommended to start with Part 1: How to Create a Flat Styled Combo Box with Square UI before completing this tutorial.

What you will learn in this tutorial: How to add a widget or plugin built in Photoshop to your website and add functionality to it with jQuery. (And why creating the widget in this manner is a good option for your site.)

Video run time: 45 minutes

Skill level: Intermediate to advanced coding and knowledge of development tools, including jQuery, is recommended. Users will also need a working knowledge of Adobe Photoshop.

Download Source Code

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @_davideast.


  1. Roman Aug 31, 12:15 am

    Really love your tutorials, can’t wait to see more of them :).

  2. John Dervishi Aug 31, 1:59 am

    Man, you make the best tutorials ever. Can’t wait to see more :)

  3. Nikos Sep 3, 9:01 pm

    Thanks for the excellent tutorial and the resources.

  4. Jorge Correa Sep 10, 7:13 pm

    Thank you so much for your tutorial.

    Really useful.

    From Spain ;-)

  5. turbo_MaCk Sep 15, 2:22 pm

    Combobox for select multiple with keyboard control base on this tutorial:

  6. Mike Etts Oct 13, 6:58 pm

    Awesome video, a boatload of info. Many thanks for sharing your deep expertise. I don’t know if the download is out of date but I believe the button calls should be “.options” instead of “#options” i.e., $(‘#options’).combobox(‘destroy’); ==> $(‘.options’).combobox(‘destroy’);


Leave a Reply

* Minimum length: 20 characters