Selected: none
4 | <%= javascript_include_tag config[:places_lib_url] %> 5 | -------------------------------------------------------------------------------- /docs/source/partials/examples/_single_country_search.html.erb: -------------------------------------------------------------------------------- 1 |Selected: none
12 | <%= javascript_include_tag config[:places_lib_url] %> 13 | -------------------------------------------------------------------------------- /docs/source/partials/examples/_templates.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%= javascript_include_tag config[:places_lib_url] %> 4 | -------------------------------------------------------------------------------- /docs/source/partials/examples/_visual-helper.html.haml: -------------------------------------------------------------------------------- 1 | %div.preview-holder.no-mobile 2 | %img{:src => "/images/visual-preview-places.png", :alt => "preview-places", :id => "visual-helper"}/ 3 | .overlay 4 | .ov-input{'data-mention' => '.ap-input'} 5 | .ov-cancel{'data-mention' => '.ap-icon-[clear/pin]'} 6 | .ov-suggestions{'data-mention' => '.ap-dropdown-menu'} 7 | .ov-suggestion-cursor{'data-mention' => '.ap-suggestion.ap-cursor (on hover)'} 8 | .ov-suggestion{'data-mention' => '.ap-suggestion'} 9 | .ov-icon{'data-mention' => '.ap-suggestion-icon'} 10 | .ov-name{'data-mention' => '.ap-name'} 11 | .ov-highlight{'data-mention' => ''} 12 | .ov-address{'data-mention' => '.ap-address'} 13 | 14 | %div.preview-holder.display-on-small 15 | %img{:src => "/images/visual-preview-places_mobile.png", :alt => "preview-places", :id => "visual-helper"}/ 16 | 17 | %table.api 18 | %thead 19 | %tr 20 | %th CSS Class 21 | %th Description 22 | %tbody 23 | %tr 24 | %td 25 | %div{:class => "css-class api-entry", :id => "css-class-ap-input"} 26 |.ap-input
27 |
28 | %td
29 | %p This class is the one use by the main places input
30 |
31 | %tr
32 | %td
33 | %div{:class => "css-class api-entry", :id => "css-class-ap-icon-pin"}
34 | .ap-icon-pin
35 |
36 | %td
37 | %p This is the class attached to the pin icon, which is visible when the input is on it's normal state
38 |
39 | %tr
40 | %td
41 | %div{:class => "css-class api-entry", :id => "css-class-ap-icon-clear"}
42 | .ap-icon-clear
43 |
44 | %td
45 | %p This is the class attached to the clear icon, which is visible when the input is filled, clicking it will empty the input
46 |
47 | %tr
48 | %td
49 | %div{:class => "css-class api-entry", :id => "css-class-ap-dropdown-menu"}
50 | .ap-dropdown-menu
51 |
52 | %td
53 | %p This class is the one that is on the whole suggestions wrapper
54 |
55 | %tr
56 | %td
57 | %div{:class => "css-class api-entry", :id => "css-class-ap-suggestion"}
58 | .ap-suggestion
59 |
60 | %td
61 | %p The .ap-suggestion class is the class of each dropdown suggestions
62 |
63 | %tr
64 | %td
65 | %div{:class => "css-class api-entry", :id => "css-class-ap-cursor"}
66 | .ap-cursor
67 |
68 | %td
69 | %p The .ap-cursor class is added to .ap-suggestion when the suggestion is hovered
70 |
71 | %tr
72 | %td
73 | %div{:class => "css-class api-entry", :id => "css-class-ap-suggestion-icon"}
74 | .ap-suggestion-icon
75 |
76 | %td
77 | %p The .ap-suggestion-icon is the class that is used on the left icon of each suggestions
78 |
79 | %tr
80 | %td
81 | %div{:class => "css-class api-entry", :id => "css-class-ap-name"}
82 | .ap-name
83 |
84 | %td
85 | %p The .ap-name class is the one used on the name of the place
86 |
87 | %tr
88 | %td
89 | %div{:class => "css-class api-entry", :id => "css-class-ap-address"}
90 | .ap-address
91 |
92 | %td
93 | %p The .ap-address class is the one used on the address of the place
94 |
95 | %tr
96 | %td
97 | %div{:class => "css-class api-entry", :id => "css-class-em"}
98 | <em>
99 | %td
100 | %p The <em> tag in the .ap-suggestion is the tag that is used to make an highlight on each names
101 |
--------------------------------------------------------------------------------
/docs/source/partials/examples/reverse-city-search/_code.html.erb:
--------------------------------------------------------------------------------
1 | When constructing a search UI using InstantSearch, you may want to filter your dataset to only display some of your products based on the distance to the end user. This is usually done using the aroundLatLngViaIP filter, or aroundLatLng filter if you have access to precise geolocation information. However geographical filters are hard to interpret when displayed in raw format, as noone really knows where the coordinates 48.8566, 2.34287 are.
Using Places, you can do a query to find the city in which your user is located and display that city name instead of a geolocation.
5 |Example:
8 | 9 |