使用当前选定的项目实现autosuggest /选择UI +单独的div

Question

I want to build a UI where a user selects several products, and those products are shown to the user, and then various computations are made on those selected products. So:

• div1: area where user selects products
• div2: current product selections are shown
• div3: results (showing results of computations made on user selections)

I am primarily a back-end PHP programmer, and by no means a JS of front-end programmer programmer, so nuances of jQuery, JavaScript or working knowledge of them, and such are not my area of expertise. I can probably implement this without JS, and have it work, without all the dynamic content. It maybe not be as immediate but it will work. Although, this is a good opportunity to try dynamic content, and when it comes to the world of JS, I figure gotta start somewhere.

I think ideally this can be implemented by using an autosuggest->select widget in div1, where I can preload existing products from DB. Then, something in div2 to show current user selections. Results in div3 can then be either computed on the fly with JS, but since majority of the computations are done in PHP I figure I will do those on the back end, and display results wither via AJAX or via page reload (form submit).

So, while I figure I can make it all completely dynamic (aka JS), rewriting existing PHP code into JS is probably not exactly beneficial.

Question: How do I do UI to support features for div1 and div2 keeping in mind that I am not an expert on JS or jQuery. And how do I pipe those selections via POST to my PHP script? After that my intentions is to reload the page with results in div3, keeping div1/div2 same as user left them before page reload. I

Answer 1

Use jQuery & Ajax Calls to achieve this. You need to follow something like this -

• Add jQuery to your application
• Assign some event listeners to your product selection in div 1
• Using the even listeners, upon selection of some product in div 1, show it in selected items in div 2.
• At this point you can make an ajax call to your server where your PHP code does the computation & send the list of products you selected via an Ajax call.
• The server can then process stuff & respond back to you with the data you need to show.
• You capture this data in your ajax request response & then populate your div 3 with this.

Showing how to do the whole thing would be a lot of code, let me show you some references that will help you -

• How to start using jquery - http://learn.jquery.com/about-jquery/how-jquery-works/
• Event handling in jQuery - http://learn.jquery.com/events/
• Ajax Calls in jQuery - http://api.jquery.com/jquery.ajax/

Hope this helps.