Extension:Page Forms/Select2 for autocompletion

Switching Semantic Forms Autocompletion to Select2
 Public URL:  https://www.mediawiki.org/wiki/User:Jatin.me/GSoC14  Bugzilla report: Bug 61974 Announcement:  http://lists.wikimedia.org/pipermail/wikitech-l/2014-March/075276.html

Name and contact information
 Name: Jatin Mehta  Email: mehtajatin05@gmail.com IRC:  jme on freenode, channels: #mediawiki and #semantic-mediawiki
 * Web Page / Blog / Microblog / Portfolio:Mediawiki User Profile: Jatin.me
 * My Blog: https://medium.com/@jatinmehta_
 * Linkedin: Jatin

Location: Allahabad, India (UTC+05:30) Typical working hours:  11 am - 5 pm (IST) and 10 pm - 2 am (IST)

Synopsis
Semantic Forms is an extension to MediaWiki that allows users to add, edit and query data using forms. It is heavily tied in with the Semantic MediaWiki extension, and is meant to be used for structured data that has semantic markup.

Autocompletion of fields in Semantic Forms is one of the most important feature which allows users to see what the previously-entered values were for a given field, this greatly helps to avoid issues of naming ambiguity, spelling, etc. The goal of this project is to switch the currently available autocompletion in Semantic Forms from jQuery UI Autocomplete to Select2.

Drawbacks in the current autocompletion
Although some of these features are now possible with some recent changes in the jQuery-UI Autocomplete library but that will also require changes in the current autocompletion, so why not move on to a rather complete and robust system i.e. Select2 JS autocompletion.
 * The jQuery UI Autocomplete has a bind method for select but it just seemed a bit messy and the coding is not the easiest to follow.
 * It does not provide the feature of 'tokenization' for the fields which can hold multiple values.
 * Inflexible autocompletion for characters with accent.

Advantages of Select2 JS autocompletion
It has everything from a solid multi-select feature to AJAX loading, to rich item formatting - very easy to use and powerful. It supports searching, remote data sets, and infinite scrolling of results. Browser compatibility: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+.
 * Tagging: ability to add new items on the fly.
 * Flexible accent folding is also available.
 * Working with large, remote datasets: ability to partially load a dataset based on the search term.
 * Templating: support for custom rendering of results and selections.

Mentors

 * Yaron Koren, Stephan Gambke

Switching to Select2 will make significant improvements

 * It will make ‘Tokenization’  possible for the fields which allow multiple values. Tags.png
 * Flexible autocompletion for characters with accents. (accent-folding has its limitations but it can help make some important yet overlooked user interactions work better. An accent-folding function essentially maps Unicode characters to ASCII equivalents. Anywhere you apply case-folding, you should consider accent-folding, and for exactly the same reasons. With accent-folding, it doesn’t matter whether users search for cafe, café or even çåFé; the results will be the same.) Accent-folding.png ‎
 * Display of an image associated with each term.
 * Displaying values in a tree structure.


 * Much better support for autocompletion on remote data sets.

Different phases of the project
Phase I: This phase would involve the basic task of introducing Select2 JS autocomplete to the current autocompletion system of Semantic Forms with no or minimal UI changes to get the whole system running fine with this new autocompletion system.

Phase II: In this phase I would integrate the feature for flexible autocompletion of characters with accents and the feature of displaying image associated with each term (which involves designing and improvements in UI ).

Phase III: This phase would involve more of designing part which include designing UI of tree-type structure for displaying values and UI for the autocompletion on remote data sets. Later in this phase I would also work on allowing admins/users to set layouts for the remote data sets.

Phase IV: This is an important phase, which involve introducing new input types for fields in Semantic Forms. For Example, "tokens" may be one such new input type which can be used for fields that can hold multiple values (this will result in depreciation of the existing "text with autocomplete"), etc. Later in this phase I will make combobox which will use Select2, default input type for Page property fields. Also, possibly "combobox" and "tokens" would become the new default input types for enumerated fields holding a single and a list of values, respectively (replacing "dropdown" and "checkboxes").

Phase V: This is the final phase of the project which involve cleaning up of the codebase, making proper documentation of the codes written and reviewing all the functionalities and fixing any bugs whatsoever.

Deliverables
After successful completion of this project following features will be added to Semantic Forms:
 * Autocomplete in SF using Select2 JS library.
 * Tokenization of the values in the fields which support multiple values.
 * Autocompletion for characters with accents.
 * Image display for each term (if some image is associated with it).
 * Tree-type structure for values.

Participation
This section describes on how I plan to work during the internship period.

Communication of progress

 * Email - I will keep mentor updated about the progress.
 * IRC Channel - I will go on the #semantic-mediawiki channel during the working hours.
 * Mailing list - semediawiki-user mailing list will be used to communicate progress.
 * Blog - I will post helpful articles and updated about the project on my personal blog.

Publishing source code

 * Gerrit: Wikimedia Code Review

How and where you plan to ask for help?

 * Try Solving on my own: Go through documentation, search online, etc.
 * Seek helps from the community: Ask questions on IRC, mailing list and mentors.
 * Seek help from outside the community: skilled friends, my teachers, etc.

About me
I got to know about the GSoC program from a friend of mine. I then started to look into various mentoring organizations that participate in the program based on my skills which include PHP, Javascript and CSS and I found wikimedia as the organization I could work in. In early May our summer vacation of college will start and ends by late of July; I can give my full time commitment to this project,. I assure dedication of at least 40 hours per week to the work and that I do not have any other obligations from early May till mid August.
 * I am currently a 3rd year Computer Science undergrad at Indian Institute of Information Technology, Allahabad, India.
 * I have coding experience with C, C++, Java and I am very much comfortable with PHP, Javascript, HTML and CSS for doing tasks related to web development. I have also used Knockout.js ( based on MVVM design pattern) with MVC frameworks like Ruby on Rails to build web applications.
 * My interests lie in web development, UX Design, Data Science, Artificial Intelligence and contributing to open source organizations.
 * I am new to open source community and enjoying to be a part of it. I love the idea of free and open knowledge for all and this is what drives me towards Wikimedia and its projects. It feels good to do something through which everyone is benefited.
 * How did you hear about this program?
 * Will you have any other time commitments, such as school work, another job, planned vacation, etc., during the duration of the program?

Past experience
I have been involved with Mozilla Foundations as a Firefox Student Ambassador at my institute. I believe in the concept of open and free web and thus I organized events in my community to spread awareness about Mozilla Foundation products which support this cause, their projects and mission of open web for all.

In fact, in general I tried to encourage people about open source. Through these sort of events, at least I was able to get some people involved into open source communities. I have also encouraged people with programming skills to collaborate on various open source projects.

This gave me an immense pleasure and a feeling of satisfaction that I am doing my part and giving contribution to open source.

IIIT-Allahabad Technical Society- 
 * Other Involvements and Projects I have done:
 * Lead Web Developer for institute's website.
 * Developed a registration system for cultural-tech festival Effervescence.
 * Developed softwares to facilitate management of services and provide online presence to college services. (github).

IIIT-Allahabad Network Engineering Society- Campus Consultant. Club lead. Involved in management and security of the institute's network along with server side administration. (Reference)