Autocomplete: Doesn't work with IME (input method editor)

[xcl3721]

the chinese user find if you input a chinese the autocomplete compment will not work only.current they using keyborad with down key to select the opinion

​forum post

[Jörn Zaefferer]

I've read elsewhere that inputting chinese characters can require multiple keypresses per character. But that in itself shouldn't be a reason for the autocomplete to break. Can you provide some more detail on the issue? Without a chinese keyboard I have no idea how to test this.

[xcl3721]

hi thank you here is the code

 var availableTags = ["剧情","喜剧","动作","爱情","惊悚","短片","纪录片","犯罪","恐怖","冒险","悬疑","动画","家庭","战争","奇幻","科幻","歌舞","西部","音乐","传记","历史","运动","成人","古装","武侠","戏曲","黑色电影","儿童","情色","舞台艺术","美国","日本","中国","香港","法国","英国","意大利","德国","韩国","西班牙","加拿大","台湾","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","高清","普清","强烈推荐","频道推荐","经典推荐","分类推荐",];
	function split(val) {
		return val.split(/,\s*/);
	}
	function extractLast(term) {
		return split(term).pop();
	}
	
	$("#mv_category").autocomplete({
		minLength: 0,
		source: function(request, response) {
			response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
		},
		focus: function() {
			return false;
		},
		select: function(event, ui) {
			var terms = this.value.split(/,\s*/);
			for(i in terms)
			{
			      if(terms[i]==ui.item.value)return false;
			}
			terms.pop();
			terms.push( ui.item.value );
			terms.push("");
			this.value = terms.join(",");
			return false;
		}
	});

you can use past to test this :) good luck!

[xcl3721]

and when i type chinese it'will not show the list but if i input the backspace to chinese or space it's will show hopefully

[Scott González]

If I paste "剧" I get results. I don't know any other way to test this though.

[Scott González]

I figured out a way to actually type in Chinese characters on OS X. What I noticed is that Chrome doesn't trigger any key events, but does trigger an input event. Firefox doesn't trigger keydown or keyup, but does trigger keypress and input. I couldn't get the characters to even get typed in IE through Virtual Box. So the problem is that the browsers don't report the events and therefore I don't think this is a problem that we can fix.

[Zeke]

I think we can let the keydown handler handles the control input while the keyup handler handles the character input. Here is the original code:

.bind( "keydown.autocomplete", function( event ) {
	var keyCode = $.ui.keyCode;
	switch( event.keyCode ) {
	case keyCode.PAGE_UP:
		self._move( "previousPage", event );
		break;
	case keyCode.PAGE_DOWN:
		self._move( "nextPage", event );
		break;
	case keyCode.UP:
		self._move( "previous", event );
		// prevent moving cursor to beginning of text field in some browsers
		event.preventDefault();
		break;
	case keyCode.DOWN:
		self._move( "next", event );
		// prevent moving cursor to end of text field in some browsers
		event.preventDefault();
		break;
	case keyCode.ENTER:
	case keyCode.NUMPAD_ENTER:
		// when menu is open or has focus
		if ( self.menu.active ) {
			event.preventDefault();
		}
		//passthrough - ENTER and TAB both select the current element
	case keyCode.TAB:
		if ( !self.menu.active ) {
			return;
		}
		self.menu.select( event );
		break;
	case keyCode.ESCAPE:
		self.element.val( self.term );
		self.close( event );
		break;
	case keyCode.LEFT:
	case keyCode.RIGHT:
	case keyCode.SHIFT:
	case keyCode.CONTROL:
	case keyCode.ALT:
	case keyCode.COMMAND:
	case keyCode.COMMAND_RIGHT:
	case keyCode.INSERT:
	case keyCode.CAPS_LOCK:
	case keyCode.END:
	case keyCode.HOME:
		// ignore metakeys (shift, ctrl, alt)
		break;
	default:
		// keypress is triggered before the input value is changed
		clearTimeout( self.searching );
		self.searching = setTimeout(function() {
			self.search( null, event );
		}, self.options.delay );
		break;
	}
})

And the modified code:

.bind("keydown.autocomplete", function(event) {
    var keyCode = $.ui.keyCode;
    switch (event.keyCode) {
        case keyCode.PAGE_UP:
            self._move("previousPage", event);
            break;
        case keyCode.PAGE_DOWN:
            self._move("nextPage", event);
            break;
        case keyCode.UP:
            self._move("previous", event);
            // prevent moving cursor to beginning of text field in some browsers
            event.preventDefault();
            break;
        case keyCode.DOWN:
            self._move("next", event);
            // prevent moving cursor to end of text field in some browsers
            event.preventDefault();
            break;
        case keyCode.ENTER:
        case keyCode.NUMPAD_ENTER:
            // when menu is open or has focus
            if (self.menu.active) {
                event.preventDefault();
            }
            //passthrough - ENTER and TAB both select the current element
        case keyCode.TAB:
            if (!self.menu.active) {
                return;
            }
            self.menu.select(event);
            break;
        case keyCode.ESCAPE:
            self.element.val(self.term);
            self.close(event);
            break;
        default:
            break;
    }
})
.bind("keyup.autocomplete", function(event) {
    var keyCode = $.ui.keyCode;
    switch (event.keyCode) {
        case keyCode.PAGE_UP:
        case keyCode.PAGE_DOWN:
        case keyCode.UP:
        case keyCode.DOWN:
        case keyCode.ENTER:
        case keyCode.NUMPAD_ENTER:
        case keyCode.TAB:
        case keyCode.ESCAPE:
        case keyCode.LEFT:
        case keyCode.RIGHT:
        case keyCode.SHIFT:
        case keyCode.CONTROL:
        case keyCode.ALT:
        case keyCode.COMMAND:
        case keyCode.COMMAND_RIGHT:
        case keyCode.INSERT:
        case keyCode.CAPS_LOCK:
        case keyCode.END:
        case keyCode.HOME:
            // ignore metakeys (shift, ctrl, alt)
            break;
        default:
            // keypress is triggered before the input value is changed
            clearTimeout(self.searching);
            self.searching = setTimeout(function() {
                self.search(null, event);
            }, self.options.delay);
            break;
    }
})

I have tried this and it really works. But I'm not sure if any new bug is introduced.

[Scott González]

Are you using a Chinese keyboard to test this? It's kind of difficult for us to land a fix to something that we can't test.

[Zeke]

Yes, I have used a Chinese keyboard to test this. You can contact me and let's figure out how to configure a test environment. My MSN is [email protected]…

[Zeke]

Replying to Zeke:

Yes, I have used a Chinese keyboard to test this. You can contact me and let's figure out how to configure a test environment. My MSN is [email protected]…

My MSN is [email protected] hotmail.com (Remove the blank space after @)

[dleangen]

I would suggest changing the title of this ticket to something like:

Autocomplete: improper use of key events when using an IME

[dleangen]

This is also a problem for me when using Japanese. I would like to try to provide help so we can fix this. Currently, the Autcomplete is useless for Japanese due to this problem.

You do not need a Chinese / Japanese keyboard to test: only an IME (input method editor). You can do this with a US keyboard.

In Japanese, you would enter a word like this (with the IME turned on). For example, the word "現行" (bank, pronounced "ginkou"):

press "g" (you see "g" in the text field, underlined, but not yet "entered")
press "i" (now you will see "ぎ", which is the "hiragana" [pronounciation] character for "gi")
press "n" (now you will see "ぎn" in the text field, still underlined, but not "entered")
press "n" (now you will see "ぎん" in the text field, still underlined, but not "entered")
press "k" (now you will see "ぎんk", ditto)
press "o" ("ぎんこ")
press "u" ("ぎんこう")

Finally, you now have all the text necessary to convert to the kanji (Chinese character).

press [space] (now you will see "銀行", which is the word we want, still underlined
but not selected as there are other words that match the same pronounciation)
press [enter] (finally, the actual word is entered into the text field)

Here is one suggested behaviour for the above example. There are probably other ways, too, so let me know if this is too complicated to implement.

press "g" --> no action
press "i" --> lookup using "ぎ" as the lookup key
press "n" --> no additional action
press "n" --> lookup using "ぎん" as the lookup key
press "k" --> no additional action
press "o" --> lookup using "ぎんこ" as the lookup key
press "u" --> lookup using "ぎんこう" as the lookup key
press [space] --> no additional action
press [enter] --> lookup using "銀行" as the lookup key

[Scott González]

Unfortunately, I think I have to close this ticket. I've spent a lot of time on this and I don't think this can work properly/consistently across browsers without polling and some crazy sophisticated translation tables.

[Scott González]

#6730 is a duplicate of this ticket.

[Scott González]

#7206 is a duplicate of this ticket.

[Scott González]

#7375 is a duplicate of this ticket.

[deerchao]

This issue only exists in FireFox. There is a easy fix: to bind event 'input' like this:

.bind('input.autocomplete',function (){
    $(this).trigger('keydown');
}).bind('blur.autocomplete'...

[Scott González]

Replying to deerchao:

This issue only exists in FireFox. There is a easy fix: to bind event 'input' like this:

The input event is actually not useful in Firefox with IME. It's exactly as useful/useless as keyup; it's only triggered when "committing" the word with enter.

[NineAllexis]

I just did some experiment and thought to share it with everyone.

keyup.autocomplete does not work for my Chinese Traditional IME.

It was then solved by adding input.autocomplete in the same line.

So it goes like...

.bind("keydown.autocomplet",function(event){....
.bind("keyup.autocomplete input.autocomplete", function(event) { ...

tested with Firefox 6, IE7, Chrome. jQuery-ui-1.8.9