Question

我有一个带有JQuery UI自动完成功能的搜索框。我希望将用户输入的术语与一组案例进行比较（请参阅下面的switch语句中的“kittens”和“puppies”。另请参阅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;
 }
 });

但是如果用户在键入几个字母之后利用自动完成和向下箭头选择选项“kittens”，则没有任何反应 - 因为我的函数绑定了.change，并且在.query上触发.change时，还没有比赛。 IE用户输入“ki”然后向下箭头，这与“小猫”不匹配。

如何更改我的功能，以便在输入整个单词之前不会触发它，无论是用户手动输入“小猫”，还是用户输入“ki”然后从自动完成选项中选择？换句话说：除了.change之外还有哪些选项来检测文本框中是否有条目？

Answer 1

.blur是文本框失去焦点时的键触发操作。这意味着用户可以键入整个单词“kitten”，或者开始向下滚动自动更正列表，这将触发我的功能。

http://docs.jquery.com/Events/blur#fn

使用JQuery UI自动完成小部件时处理文本框.change

1 个答案: