仅在按下特殊键时显示Jquery UI自动完成

时间:2013-05-13 22:01:10

标签: jquery jquery-ui jquery-ui-autocomplete

我有一个带自动填充的文本框,我只想在按下点密钥.时显示结果。

我试过了:

 $("#tags").on("keypress", function () {
     var keys = [];
     keys.unshift(e.which);
     if (String.fromCharCode(keys[0]) == ".") {

     } else {
         $("#tags").unbind();
     }
 });

但是,$("#tags").unbind();会从文本框中删除所有事件,如果再按一次点键,结果将不会显示。

我该如何解决这个问题? Live jsfiddle

2 个答案:

答案 0 :(得分:2)

这是一个模拟visual studio所做的解决方案: http://jsfiddle.net/xHy6n/2/
它存储了最后一个“。”的位置。并使用它之后的任何内容作为自动完成的过滤器。

 $(function () {
     var availableTags = [
         "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
     var lastDot = -1;

     $("#tags").autocomplete({
         minLength: 0,
         source: function (request, response) {
             if (lastDot>=0) {
                 response($.ui.autocomplete.filter(
                 availableTags, extractLast(request.term.substring(lastDot+1))));          
             }
         },
         focus: function () {
             return false;
         },
         select: function (event, ui) {
             var terms = split(this.value);
             terms.pop();
             terms.push(ui.item.value);
             terms.push("");
             this.value = this.value.substr(0,lastDot+1);
             this.value += terms.join("");
             return false;
         }
     }).on("keypress", function (e) {
         var keys = [];
         keys.unshift(e.which);
         if (String.fromCharCode(keys[0]) == ".") {
             lastDot =  $("#tags").val().length;

         }
     });

     function split(val) {
         return val.split(/,\s*/);
     }

     function extractLast(term) {
         return split(term).pop();
     }
 });

答案 1 :(得分:1)

您可以尝试使用此类内容(而不是绑定/解除绑定)(这样您就可以通过按.来切换自动完成的激活/停用:

$("#tags").on("keypress", function (e) {
     var keys = [];
     keys.unshift(e.which);
     if (String.fromCharCode(keys[0]) == ".") {
         if(autocomplete_flag == 0) {
             autocomplete_flag = 1;
             $(this).autocomplete( "enable" );
         } else {
             autocomplete_flag = 0;
             $(this).autocomplete( "disable" );
         }
     }
 });

像这样:http://jsfiddle.net/darkajax/fEsN5/6/