CODEWITHSUNDEEP
amp-htmlamp-mustache
Shubhankar Dimri
Shubhankar Dimri

Reputation: 303

Trying to create AMP list inside a form but it is not rendering properly

I am trying to set location filter in the form by using amp-list, I am trying to do in the following way:

 <amp-list width="auto"
                height="35"
                layout="fixed-height"
                src="<?php echo plugins_url
                        ( 'assets/json/locations.json', __FILE__ ) ?>">
            <template type="amp-mustache">
                <select id="locations"
                    name="location"
                    on="change:
                    AMP.setState({
                    locations: dropdown.items.filter(x => x == event.value)
                    })"
                >
                    <option value="">Choose a location</option>
                    {{#items}}
                    <option value="{{.}}">{{.}}</option>
                    {{/items}}
                </select>
            </template>
            </amp-list>

and my json file is like this:

{"items":["Bangalore","Indore","Long Island","Lucknow","New Delhi","New Jersey"]}

The current amp-list rendering is below the keyword text input box

enter image description here

I have read documentation but I am unable to figure it out, please help. I want to have all locations inside single 'choose location' drop-down

Upvotes: 1

Views: 224

Answers (1)

Sebastian Benz
Sebastian Benz

Reputation: 4288

You have to move the <select> outside the amp-list:

  <select id="locations" name="location" on="change:
                    AMP.setState({
                    locations: dropdown.items.filter(x => x == event.value)
                    })">
    <option value="">Choose a location</option>
    <amp-list width="auto" height="35" layout="fixed-height" src="<?php echo plugins_url
                        ( 'assets/json/locations.json', __FILE__ ) ?>">
      <template type="amp-mustache">


        <option value="{{.}}">{{.}}</option>

      </template>
    </amp-list>
  </select>

Upvotes: 1

Related Questions