Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#5933 closed bug (wontfix)

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

Reported by: xcl3721 Owned by:
Priority: major Milestone: 1.9.0
Component: ui.autocomplete Version: 1.8.4
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Scott González)

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

Change History (20)

comment:1 Changed 9 years ago by 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.

comment:2 Changed 9 years ago by 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!

comment:3 Changed 9 years ago by 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

comment:4 Changed 9 years ago by Scott González

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

comment:5 Changed 9 years ago by Scott González

Resolution: wontfix
Status: newclosed

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.

comment:6 Changed 9 years ago by Zeke

Resolution: wontfix
Status: closedreopened

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.

comment:7 Changed 9 years ago by Scott González

Milestone: TBD1.9
Priority: criticalmajor

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.

comment:8 Changed 9 years ago by 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 lvzecai@…

comment:9 in reply to:  8 Changed 9 years ago by 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 lvzecai@…

My MSN is lvzecai@ hotmail.com (Remove the blank space after @)

comment:10 Changed 9 years ago by Scott González

Summary: when the user input chinese it's won't show the search result divAutocomplete: Ignores Chinese input

comment:11 Changed 9 years ago by dleangen

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

Autocomplete: improper use of key events when using an IME

comment:12 Changed 9 years ago by 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

comment:13 Changed 9 years ago by Scott González

Description: modified (diff)
Summary: Autocomplete: Ignores Chinese inputAutocomplete: Doesn't work with IME (input method editor)

comment:14 Changed 9 years ago by Scott González

Resolution: wontfix
Status: reopenedclosed

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.

comment:15 Changed 9 years ago by Scott González

#6730 is a duplicate of this ticket.

comment:16 Changed 9 years ago by Scott González

#7206 is a duplicate of this ticket.

comment:17 Changed 9 years ago by Scott González

#7375 is a duplicate of this ticket.

comment:18 Changed 8 years ago by 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'...
Last edited 8 years ago by deerchao (previous) (diff)

comment:19 in reply to:  18 Changed 8 years ago by 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.

comment:20 Changed 8 years ago by 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

Note: See TracTickets for help on using tickets.