Why 'real' and what’s wrong with jQuery autocomplete for Korean language? The problem is that jQuery autocomplete handles the Korean language in the same way as any other language. But, Korean has it specific while typing it in some input field. For example lets see how jQuery autocomplete works: you type a character – autocomplete finds items that starts with this character, only one button press will give you the results (Fig.1). This new approach will be shown in the base of Drupal CMS.
Fig.1 Autocomplete example
Why isn’t this a good approach for Korean language? The problem is that in order to input one Korean character (next hangul), you need to press two or three buttons and only after that autocomplete will show you results. But, as soon as you start typing next hangul – the previous results will disappear until you complete the set of characters (next jamo) for composing hangul (Fig.2).
Fig.2 Default jQuery autocomplete with Korean language.
For a better understanding visit https://www.branah.com/korean. As you can see, to type 건반 you need to press ㄱ ㅓ ㄴ ㅂ ㅏ and ㄴ. More information about how the Korean writing system works could be found at http://gernot-katzers-spice-pages.com/var/korean_hangul_unicode.html.
What is the solution? The solution is to help jQuery autocomplete by decomposing hangul to components and allowing the autocomplete script to do its work. Let’s look at some code as an example.
First we need to include the system ui.autocomplete library. For example it could be included using #attached in a renderable array of the form:
Next create a Drupa.behaviors object with next methods in addition to default attach:
config – for storing lead, vowel, tail arrays of hangul components (jamo). sBase, lBase, vBase – where lBase and sBase are the Unicode range from AC00 (decimal 44032) to D7A3 (decimal 55203). And vBase equals to 588.
hangul2jamo – helper function to decompose hangul to jamo. Returns object with lead, vowel and tail (tail can be empty).
attachAutocomplete – main autocomplete function which takes selector of input field and list of values to search in, for autocomplete results, as arguments.
The algorithm is to check if the character that been inputed are not English, then to check if it can be decomposed by hangul2jamo function. If it can be decomposed then we pass this decomposed string to default jQuery autocomplete functionality which now can work with this string properly after first key press (Fig.3) and even after first hangul was entered (Fig.4).
Fig.3 Example of autocomplete work with additional script.
Fig.4 Example of autocomplete work even after first hangul was entered.
Below is the code implementing described algorithm. Assume we have an input field with 'edit-product' id.
And this code doesn't break default jQuery autocomplete. Autocomplete with english characters still works (Fig.5).
Fig.5 English autocomplete still works.
In conclusion. We made Korean autocomplete work in the same way as it works with any other language. No more note messages about special behavior on the Korean version of your site or even disabling autocomplete (or whatever action you took to make a workaround for this issue). All of your site visitors will be treated in the same way. Because, after all, isn't this a whole point?