By Peter Bell

Any Ideas on Implementing a Simple Product Selector?

I have a project with a couple of thousand products and what I really need is support for some kind of product selector where you can search or filter for the products you want to associate to something.

For example, when managing cross sells, I envision a text area where you can optionally enter product IDs or SKUs, but a link next to it titled "product selector". Clicking on the link would pop open a window with some kind of filter search and paginated product list. You'd check a check box next to the products you wanted and then hit the "add selected" button at the bottom of the page that would add the selected IDs or SKUs to the value of the text area. I don't love the idea of a text area although it has the benefits of allowing for manual entry and being simple - maybe another approach would be a multiple select with values being added based on either entries into a text box or on those selected using the pop-up.

I guess what I'm wondering is if anyone has seen a good example of a fairly slick such system that could be generalized and generated for the generic case where you need to use a pop up to select n-elements of an object and return titles and values to some kind of underlying page with a select box. I'm a complete JS n00b, so I'm really trying to find to find a slick sample that I could dissect, generalize and use as a custom data type to solve this class of display problems. The stuff I really don't get is how to handle things like passing the values from one window to another and I'm not absolutely sure about the visual interface either. Anyone seen a slick solution to this class of problem?

Comments
Pete,

I have done things like that. I have never quite been satisfied with it (but it doesn't come up often enough for me to make time to improve). The way I handle it is that I open up a pop-up window and, as part of the URL query string, pass in a Javascript function name. This function name will act as my "handler" for whatever data I am passing back (usually some sort of delimited list or array). It does a decent job, but again, never been 100% happy with it.

If no one else chimes in, I can whip something up at lunch to demo what I am talking about.
# Posted By Ben Nadel | 5/2/07 9:08 AM
Hi Ben,

Would love to have a look at that! Know what you mean about never enough cases to improve it - that is really why I haven't got into this problem before, but I'm now going through everything I do trying to improve the components I'm going to be reusing. If I do find anything better I'll certainly let you know/contribute it back!
# Posted By Peter Bell | 5/2/07 9:27 AM
Have you looked at any of the javascript libraries - this seems like something jQuery would handle. .. There are lots of CF people on the mailing list!
# Posted By Jim Priest | 5/2/07 10:05 AM
Hi Jim,

You're probably right. It wasn't the kind of thing I saw off the bat with JQuery but I know it is something I should be checking out. Was just looking for a quicker fix!
# Posted By Peter Bell | 5/2/07 11:17 AM
jQuery Interface has an autocomplete mechanism that works perfectly for things like this:

http://interface.eyecon.ro/docs/autocomplete

jQuery is gentle to those new at javascript, if you follow the provided examples.
# Posted By Sam Curren | 5/2/07 11:42 AM
Oooh, autocomplete is a cool idea. Let me know if you would still be interested in seeing my take.
# Posted By Ben Nadel | 5/2/07 11:45 AM
I'd still be interested in your take only because autocomplete doesn't really fully support discovery. What happens if I do just want to browse a list of products - or filter them by SKU or filter them by title (but not necessarily the start of the title) or page through them or full text search them for keywords using verity or filter them by category? Autocomplete is a good solution, but it doesn't cover all the use cases for this problem space so I see a separate window as necessary to provide the flexibility required.
# Posted By Peter Bell | 5/2/07 12:05 PM
Thanks for the link though Sam - looks pretty cool and I'll definitely have other uses for this!
# Posted By Peter Bell | 5/2/07 12:06 PM
I just finished up a user admin component and used jQuery tabs to provide two 'views' - they can click on the 'search' tab to do an autocomplete lookup - or they can click on the 'list' view to see an entire list. At some point I'll make the list a bit more friendly with paging and maybe some Ajax...

FYI - Dan Switzer (qForms) has a nice Autocomplete example here:
http://www.pengoworks.com/workshop/jquery/autocomp...

I know some has since taken Dan's code and is further refining it but I don't think it's stable (yet).
# Posted By Jim Priest | 5/2/07 12:54 PM
Hi Jim, Nice approach - thanks. I definitely need to play with some of this stuff! Will check out Dans code too . . .
# Posted By Peter Bell | 5/2/07 1:09 PM
# Posted By Ben Nadel | 5/2/07 2:21 PM
@Ben, Many thanks - going through it now!
# Posted By Peter Bell | 5/2/07 5:19 PM
BlogCFC was created by Raymond Camden. This blog is running version 5.005.