我有一个带有 JQuery UI 自动完成功能的搜索框。我希望将用户输入的术语与一组案例进行比较(请参阅下面 switch 语句中的“小猫”和“小狗”。另请参阅此处的 JSFiddle:http: //jsfiddle.net/XcbMQ/4/) .
如果用户键入整个单词“kittens”,则此现有代码有效:
$('#change').text("nothing entered yet")
var $typeahead = new Array ("kittens","puppies","giraffe","trucks");
$('#query').autocomplete({source: $typeahead, autoFocus: true}).change(function() {
var text = $(this).val().toLowerCase();
switch (text) {
case "kittens":
$('#change').text("kittens");
break;
case "puppies":
$('#change').text("puppies");
break;
default:
$('#change').text("neither kittens nor puppies");
break;
}
});
但是,如果用户在仅输入几个字母后利用自动完成功能和向下箭头选择选项“小猫”,则不会发生任何事情——因为我的函数绑定到 .change,并且当在#query 上触发 .change 时,就会出现还没有比赛。IE 用户输入“ki”然后向下箭头,这与“kittens”不匹配。
如何更改我的功能,以便在输入整个单词之前不会触发它,或者通过用户手动输入“kittens”,或者通过用户输入“ki”然后从自动完成选项中进行选择?换一种说法:除了 .change 之外还有哪些选项可以检测到文本框中是否有输入?