i'm in pset8 and I'm familiar with html and css and a little bit of java script .i implemented search.php and configure. the search is working properly but the form in index.php is quite confusing.i don't really understand how this from is submitted to search.php to get all possible results. i don't see the action attribute or any function calls in this form.

               <div id="map-canvas"></div>

        <!-- http://getbootstrap.com/css/#forms -->
        <form class="form-inline" id="form" role="form">
            <div class="form-group">
                <label class="sr-only" for="q">City, State, Postal Code</label>
                <input class="form-control" id="q" placeholder="City, State, Postal Code" type="text"/>


I think it's just enter, and search.php will receive a "$_POST["geo"]" variable, containing the request.


The important part of this code is the line that says:

<input class="form-control" id="q" placeholder="City, State, Postal Code" type="text"/>

Specifically, the part that says id="q". This means that the text input field has an ID of #q in the Document Object Model.

Later, in scripts.js, you can select this DOM element in the configure() function like so:

// configure typeahead
// https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md
    autoselect: true,
    highlight: true,
    minLength: 1
    source: search,
    templates: {
        empty: "no places found yet",
        suggestion: _.template("<p>TODO</p>")

Notice that this boils down to a call to $("#q").typeahead( {...}, {...});.

Look ahead in scripts.js for any other places in the code that mention "#q", and read those sections carefully.

Hopefully, it's all a bit more clear to you now!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .