Mobile Age - Component - AutoComplete
A input field with autocomplete functionality
How to create an input field with autocomplete-functionality
- Use HTML code to specify a container with a unique id
<div id="unique_id"> ... some html used if JS doesn't work ... </div>
- Use a JavaScript array to initialize your list with the required options, e.g. the data server's url etc.
<script> var options = { formLabel: 'Luxembourg\'s Places: ', formName: "cities", wrapperLabel: "", wrapperInput: "", wrapperStatus: "", bem: true, bemBlock: "ma-autocomplete", xhrMethod: "GET", xhrSource: "https://mobileage.ftb-esv.de/frontend/php/data.placesLU.php", dataLimit: 7, clientFiltering: true }; <script>
- Create a new autocomplete object, where as first parameter is the selector specifing the html container.
The second parameter is the array of the actually used options.
<script> new MobileAge.Component.AutoComplete("unique_id", options); <script>
Example 1: Web-Resource - Clientside filtering
Example: A simple autocomplete reading a single JSON array from a net resource. Filtering of the displayed items after each keystroke on the client side.
Code
<div id="auto_complete-1">
<label for="id_autocomplete-1">Label:</label><input type="text" name="id_autocomplete-1" id="id_autocomplete-1"/>
</div>
<script>
var options = {
formLabel: 'Luxembourg\'s Places: ',
formName: "cities",
wrapperLabel: "",
wrapperInput: "",
wrapperStatus: "",
bem: true,
bemBlock: "ma-autocomplete",
xhrMethod: "GET",
xhrSource: "https://mobileage.ftb-esv.de/frontend/php/data.placesLU.php",
dataLimit: 7,
clientFiltering: true
};
new MobileAge.Component.AutoComplete("auto_complete-1", options);
</script>
Result
Example 2: Web-Resource from OGD - Serverside filtering
Example: A simple autocomplete reading JSON arrays from a net resource after each keystroke. Filtering of the displayed items on the server side.
Code
<div id="auto_complete-2">
<label for="id_autocomplete-2">Label:</label><input type="text" name="id_autocomplete-2" id="id_autocomplete-2"/>
</div>
<script>
var options = {
formLabel: 'Zaragoza Farmacias: ',
formName: "farmacias",
wrapperLabel: "",
wrapperInput: "",
wrapperStatus: "",
bem: true,
bemBlock: "ma-autocomplete",
xhrMethod: "GET",
xhrSource: "http://83.212.100.226/ogd/datasets/data/venues/?format=json&page_size=15&dataset_id=27",
dataLimit: 7,
dataPath: "results",
dataKey: "name",
clientFiltering: false
};
new MobileAge.Component.AutoComplete("auto_complete-2", options);
</script>
Result
Example 3: Web-Resource - Serverside filtering
Example: A simple autocomplete reading JSON arrays from a net resource after each keystroke. Filtering of the displayed items on the server side.
Code
<div id="auto_complete-3">
<label for="id_autocomplete-3">Label:</label><input type="text" name="id_autocomplete-3" id="id_autocomplete-3"/>
</div>
<script>
var options2 = {
formLabel: 'British Places: ',
formName: "place",
formValue: "",
formPlaceholder: "City/Town/Place",
wrapperLabel: "",
wrapperInput: "",
wrapperStatus: "",
statusOkay: "Okay",
bem: true,
bemBlock: "ma-autocomplete",
xhrMethod: "GET",
xhrSource: "https://mobileage.ftb-esv.de/frontend/php/data.placesUK.php",
xhrQuery: {
n: "10"
},
xhrVar: "q",
dataPath: "places",
};
new MobileAge.Component.AutoComplete("auto_complete-3", options2);
</script>
Result
Options
For a full list of available options, please refer to the Documentation for AutoComplete