jQuery FlexBox: how to retrieve user's query & process submitted form?

Question

I'm trying to learn how to use jQuery FlexBox. Getting confused:

1. My understanding is that as the user is typing into the FlexBox, what he types will be sent to the server through ajax. I'm using Django on the server side to do autocomplete, but how do I actually retrieve what the user has typed? Is the query being sent as a parameter? If so, what parameter is it? If anyone could share some code examples on how to do this it'd be greatly appreciated.

2. How do I specify the name of the FlexBox? In the documentation it is stated: "Add an empty div to the tag wherever you want the FlexBox to appear: <div id="fb"></div>". But I'd need to give that FlexBox a name so that when the form is submitted, I could process the user input in the FlexBox, right? So how do I give each FlexBox a name?

Thanks

Answer 1

The params being sent look like this:

var params = {
  q: q,
  p: p,
  s: pageSize,
  contentType: 'application/json; charset=utf-8'
}

So you're looking for q to get the query, p to get the page number and s to get the page size.

---

For the second question:
You can give it any ID you want, as long as you use the same ID in your selector, for example:

<div id="anything"></div>

And matching jQuery to populate that <div>:

$("#anything").flexbox('results.html');

It'll already generate a hidden input with the a name matching the ID, that is what you're looking for server-side. For example with the above code, this gets generated in the DOM immediately before that <div id="anything"></div>:

<input type="hidden" id="anything_hidden" name="anything" value="selectedVal" />