After very long time an article on MooTools. This time I came with the new class in MooTools.
This class is about to provide the support the autocomplete functionality. This will be useful for the search fields. This class uses the AJAX based autocomplete functionality so you don’t have to load array of all search values on page load.
From now all my demos will be hosted on github so it will be easier for you to fork it and you can start your project based on that.
For this class I have created a Demo using the Twitter Bootstrap which reduces your lots of time, which you can find here.
For how to use this class you can read further and find the information for the same.
How to use
Very first thing you need to do is include the class file just like the below code. Assuming you already have included the MooTools library.
[cc lang=”html”]
[/cc]
The after you need to initialize the class object. Have a look at below code block for the same.
[cc lang=”html”]
[/cc]
In above example you can see only three parameters, but actually it can have 7 parameters which are as below:
text_box_id: Id of the text box where you want to add the autocomplete functionality.
minimum_length: This is the number of character after which you want to make AJAX call, So for example if you set it to 3 then it will show suggestion only after you type at least 3 characters in the text box.
url: url where you want to make the AJAX Call.
result_holder_class: class of the div which holds all your results.
result_class: class of the li which holds each result.
limit: how much results you want to show at max
loading_div_class: In demo you can see there is a loading image just inside the text box. You can edit this class based on your need.
Live Demo
You can have the live demo working at Here. Also you can download the same from Github.
Don’t hesitate to leave comments for your views and suggestions for this class which can improve the class.
