Whether you’re wireframing, prototyping, or anything in between, it’s important to use the right level of fidelity for the job. If you don’t—if you sketch out your final comps on a cocktail napkin, say, or build a full-scale interactive prototype after your initial IA brainstorming session—you won’t get the kind of feedback appropriate to your project’s stage of development. (And also people might look at you funny.)

With Axure RP, our goal has long been to create a tool that can go as low- or as high-fidelity as your project calls for. At the top of that spectrum—the highest of the high-fi—we’ve got the repeater widget. (Here’s our documentation on repeaters.) Repeaters are data-driven and are generally used to build sortable tables and grids (e.g., product search results pages), but they can do a lot of other cool things as well. Today I want to show how a repeater can be used to simulate a “predictive search” structure like what you see as part of some web search services. Click here to download the predictive search example .rp file.

Animation of performing a predictive search in the output of the .rp example file included in this article

The functional part of the example file comprises a text field and a repeater. The repeater is situated below the text field and is hidden when the page first loads. The basic idea is that every time the user changes the text on the text field by typing in it, the repeater is filtered so that it only shows the items in its dataset that include the typed text. If you’re interested in learning about filtering repeaters, check out the repeater documentation linked previously in this article.

Repeaters are the one feature in Axure RP that bends our “no coding” rule; there’s a (very!) small amount of JavaScript-style syntax in one of the cases in this example file. If you don’t know a lick of JS, that’s fine—just copy the page in the example file into your own project and swap out the rows in my repeater with your own data, and it’ll work like a charm. Or, if you’re stuck on your own implementation and would like a hand, surf over to the Axure Forums or email us at <support@axure.com> for a quick, friendly, and comprehensive reply.

Share this: