jquery Autocomplete – search feature for mockups

jQuery is so beautifulistic! i wanted to add the search feature so that users can quickly type few letters and it would narrow down the list, users can then click on the desired widget and boom it is created on the canvas.

jQuery UI provides a autocomplete widget that you can tie to any text field.


To implement this feature, I just loop through a list of widgets and create an array that is acceptable to the autocomplete widget and then in the "select" callback, I lookup the name of the widget and simply invoke the widget draw procedure.

The only trick part was to determine where to position the newly created object.

Hard coding a x and y position would simply stack all the new incoming widgets and would not be a good user experience.

Adding them horizontally one after another would make the user scroll horizontally. Horizontal scrolling is not a standard scrolling behavior and hence not a good UI practise.

But if you keep adding vertically then after 5 or 6 widgets, you would end up scrolling vertically.


















So after certain widgets, the user would have to scroll up and down to reposition the widgets. Is there a better approach?

Since the only information I have is the number of objects on the canvas I thought of adding some Math functions to determine the position of the next object.

x= 50*(objCnt%5)


i applied the above formula to determine the next objects position and the result is as below











So after 5 objects, the next one goes back to the top. I think this is better than simply adding to the bottom. right?

Related posts:

  1. Mockuptiger update
  2. jquery selection
  3. PHP API for member database
  4. Mockup update: spread objects evenly
  5. Mockups and Wireframes

Get MockupTiger downloaded on your PC

Posted in Other

Would you like to build your application?

Start by sketching your idea into a wireframe in few clicks